Ответ 1
Если вы укажете только "type = number", на iPhone будет отображаться клавиатура, например:
И если вы укажете шаблон, например, <input type="number" pattern="\d*"/> или <input type="number" pattern="[0-9]*" />, то клавиатура на iPhone будет выглядеть так:
Тем не менее, он не может отображать точку (.), В настоящее время нет шаблона для обработки такого случая.
Таким образом, вы можете выбрать <input type="tel" />, который обеспечит клавиатуру, например:
Пожалуйста, обратитесь к ссылкам ниже для более подробной информации о входах для iOS:
http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/
http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html
http://mobiforge.com/design-development/html5-mobile-web-forms-and-input-types
http://www.petefreitag.com/item/768.cfm
http://html5tutorial.info/html5-contact.php
Надеюсь, что это поможет вам. :)
Обновления для настройки (ссылка: fooobar.com/questions/22725/...)
Вы можете сделать некоторые настройки, используя JavaScript.
Давайте возьмем пример ввода валюты с шаблоном десятичных дробей, в который введен e.which для чтения CharCode, а затем помещаем его в массив (до), который представляет цифры до десятичной запятой, и другой массив (после) для перемещения значений из (до) массива после десятичной запятой.
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();
});
Результат:
