Принудительно использовать цифровую клавиатуру iOS с пользовательским шаблоном / валютой
Есть ли возможность заставить iOS-устройство показывать цифровую клавиатуру при использовании пользовательского шаблона в качестве типа ввода?
мой шаблон ввода:
<input id="price" class="numeric" pattern="\d+((\.|,)\d{1,2})?" name="price"
title="" data-mini="true" data-clear-btn="true" autocomplete="off" autofocus />
Я хочу ввести значение валюты, например "14,99", и открыть клавиатуру с доступом к номерам на устройстве iOS.
<input type='number' />
<input pattern='[0-9]*' />
<input pattern='[\d]*' />
все пропускают десятичный знак и / или не проверяются как числа при добавлении десятичного знака. Альтернативным способом может быть функция javascript, которая создает десятичный знак в нужном месте, например, нажатие 1->2->9->9 в этом порядке создает нажатие клавиши () 0.01->0.12->1.29->12.99, но это требует, чтобы поле ввода было type='text' -> Очевидная проблема здесь в том, что текстовая клавиатура отображается при фокусировке поля ввода.
Как я могу решить эту проблему?
РЕДАКТИРОВАТЬ
Среда:
- JQM 1.3.2
- JQuery 1.8.2
4 ответа
На данный момент JavaScript является единственным решением. Вот самый простой способ сделать это (используя jQuery):
HTML
<input type="text">
JavaScript
$('input[type="text"]').on('touchstart', function() {
$(this).attr('type', 'number');
});
$('input[type="text"]').on('keydown blur', function() {
$(this).attr('type', 'text');
});
Идея проста. Ввод начинается и заканчивается type="text", но кратко становится type="number" в событии touchstart. Это приводит к появлению правильной клавиатуры iOS. Как только пользователь начинает вводить какой-либо ввод или покидает поле, ввод снова становится type="text", что позволяет обойти проверку.
У этого метода есть один недостаток. Когда пользователь возвращается к вводу, который уже был заполнен, ввод будет потерян (если он не подтвержден). Это означает, что пользователь не сможет вернуться и отредактировать предыдущие поля. В моем случае это не так уж и плохо, потому что пользователь может захотеть использовать калькулятор снова и снова с разными значениями, поэтому автоматическое удаление ввода сохранит их за несколько шагов. Тем не менее, это не может быть идеальным во всех случаях.
Похоже, что Mobile Safari поддерживает новые атрибуты типа ввода HTML5: электронная почта, номер, поиск, тел и URL. Это переключит отображаемую клавиатуру. Смотрите атрибут типа.
Так, например, вы можете сделать это:
<input type="number" />
И когда поле ввода имеет фокус, отображается цифровая клавиатура (как если бы у пользователя была полная клавиатура и он нажал кнопку "123").
Если вы действительно хотите только цифры, вы можете указать:
<input type="tel" />
И тогда пользователь получит номер телефона, набирающий клавиатуру.
Я знаю, что это работает с Mobile Safari - я только предполагаю, что это будет работать с UIWebView.
http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/
Я сделал этот небольшой фрагмент, чтобы добиться того, чего вы хотите, и я протестировал его на iPhone 5 v7.0.3
я использовал e.which читать CharCode введите и затем вставьте его в массив (до), который представляет цифры перед десятичной меткой, и другой массив (после), чтобы переместить значения из (до) массива после десятичной метки.
Это может выглядеть сложно из-за моих скромных навыков программирования.
1) Код демо - 2) Демо конвертация валюты
HTML:
<input type="tel" id="number" />
JS
Переменные и функции:
// declare variables
var i = 0,
before = [],
after = [],
value = [],
number = '';
// reset all values
function resetVal() {
i = 0;
before = [];
after = [];
value = [];
number = '';
$("#number").val("");
$(".amount").html("");
}
// add thousand separater
function addComma(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Основной код:
// listen to keyup event
$("#number").on("keyup", function (e, v) {
// accept numbers only (0-9)
if ((e.which >= 48) && (e.which <= 57)) {
// convert CharCode into a number
number = String.fromCharCode(e.which);
// hide value in input
$(this).val("");
// main array which holds all numbers
value.push(number);
// array of numbers before decimal mark
before.push(value[i]);
// move numbers past decimal mark
if (i > 1) {
after.push(value[i - 2]);
before.splice(0, 1);
}
// final value
var val_final = after.join("") + "." + before.join("");
// show value separated by comma(s)
$(this).val(addComma(val_final));
// update counter
i++;
// for demo
$(".amount").html(" " + $(this).val());
} else {
// reset values
resetVal();
}
});
Сброс:
// clear arrays once clear btn is pressed
$(".ui-input-text .ui-input-clear").on("click", function () {
resetVal();
});
Результат:
Не могу оставить комментарий на /questions/2015382/prinuditelno-ispolzovat-tsifrovuyu-klaviaturu-ios-s-polzovatelskim-shablonom-valyutoj/2015398#2015398 поэтому постинг в качестве отдельного ответа...
Это та же идея, что и /questions/2015382/prinuditelno-ispolzovat-tsifrovuyu-klaviaturu-ios-s-polzovatelskim-shablonom-valyutoj/2015398#2015398 но вместо переключения типа используется шаблон, который переключается.
Это приводит к тому, что значение в текстовом поле не сбрасывается в фокусе, когда значение не соответствует числовому формату, например, если значение имеет разделители (1 234,56).
$('input[type="text"]').on('touchstart', function() {
$(this).attr('pattern', '[0-9]*');
});
$('input[type="text"]').on('focus', function() {
$(this).attr('pattern', actualpattern);
});
Я думаю, что вы можете использовать тот же подход, который я предложил Ранджану.
Использование текстового поля как буфера. Сначала необходимо определить, когда появляется клавиатура, и проверить, является ли первый респондент веб-представителем. Тогда вы станете textview в качестве первого респондента.
Когда вы настраиваете текст внутри ввода веб-просмотра, вы можете добавить некоторую логику для проверки номера.
Вот ссылка на мой пример проекта с решением, в вашем случае вам не нужно менять inputView. Но подход тот же, используйте Человека посередине.