<input type = "number" /> не показывает цифровую клавиатуру на iOS
Согласно документации Apple, когда я настраиваю элемент ввода с типом number Я должен получить цифровую клавиатуру.
<input type="number"/>
number: Текстовое поле для указания номера. Выводит цифровую клавиатуру в iOS 3.1 и более поздних версиях.
Выглядит чертовски почти невозможно, чтобы испортить. Однако, когда я смотрю эту простую скрипку на моем iPhone или симуляторе (оба iOS6), цифровая клавиатура не появляется, и вместо этого я получаю стандартную буквенную клавиатуру.
Что я мог тут испортить?
5 ответов
Вам необходимо указать шаблон:
<input type="number" pattern="\d*"/>
Как number может также быть отрицательным или с плавающей точкой, так что - и . и должен быть доступен на клавиатуре, если вы не укажете шаблон только для цифр.
Начиная с iOS 12.2 (выпущенной 25 марта 2019 г.) это решение будет работать, и его проще всего реализовать.
<input type="number" inputmode="decimal"/>
Это вызовет только цифровую клавиатуру без символов #+*, которые идут с использованием input="tel"
Я не уверен, что это именно то, что вам нужно, но input type = "tel" даст вам "номерной знак".
По моему опыту, это очень противоречиво во всех браузерах. iOS перешла туда-сюда между правильной поддержкой этого в моем случае использования. Я вообще просто хочу, чтобы отображаемая клавиатура по умолчанию была цифровой. В прошлый раз, когда я проверял, использование input type="number" правильно отображает цифровую клавиатуру, но атрибут "size" игнорируется, что плохо отражается на моем мобильном формате. Я добавил атрибут ко всем входам, которые я бы предпочел использовать по умолчанию для цифровой клавиатуры, и я использовал jQuery для изменения любых атрибутов (то есть type="number"), когда браузер обнаружил, что он работает правильно. Таким образом, мне не нужно возвращаться и обновлять отдельные входные данные, и я могу применять их только в поддерживаемых браузерах.
Было бы неплохо, если бы основные мобильные операционные системы имели атрибут "клавиатура по умолчанию" помимо типа ввода. Что если пользователь вводит адрес или почтовый индекс? Как правило, они начинаются с цифр, поэтому полезно показывать цифровую клавиатуру по умолчанию, но разрешать ЛЮБОЙ текст.
Что касается проверки, я не могу полагаться на браузер для поддержки проверки для определенных типов ввода, поэтому я использую JavaScript и проверку на стороне сервера.
Привет. Я знаю, что этот вопрос старый, но я чувствовал, что это очень востребованное решение, и решил опубликовать ответ.
Вот решение, которое я создал, чтобы адресовать клавиатуру iPad, а также почти все остальное.
Кроме того, этот подход не требует использования ввода номера типа, что, на мой взгляд, очень некрасиво.
Ниже вы можете найти рабочую версию.
Мысли о клавишах клавиатуры Apple iPad...
Мне пришлось создать обработчик события keyPress для захвата и подавления клавиш на iPad, которые, кажется, не обрабатываются событием keyDown или являются неоднозначными???!
// Bind keydown event to all input type=text in form.
$("form input[type=text]").keydown(function (e) {
// Reference to keyCodes...
var key = e.which || e.keyCode;
// Reference to shiftKey...
var shift_key = e.shiftKey;
// Reference to ctrlKey...
var ctrl_key = e.ctrlKey;
// Reference to altKey...
var alt_key = e.altKey;
// When user presses the shiftKey...
if(e.shiftKey) {
//...supress its click and whatever key follows after it.
console.log(e.shiftKey + ' and ' + key + ' supressed.');
// Deny
return false;
// ONLY Allow Numbers, Numberpad, Backspace & Tab
} else if ( (key >= 48 && key <=57) || (key >= 96 && key <=105) || (key >= 8 && key <=9) ) {
// Allow
return true;
} else {
// Deny every other key and/or shift + key combination NOT explicitly declared.
return false;
}
});
// KeyPresss to handle remaining iPAD keyboard keys!
// These keys don't seem to be handled by the keyDown event or are ambiguous???!
// Bind keypress event to all input type=text in form.
$("form input[type=text]").keypress(function (e) {
// Reference to keyCodes...
var key = e.which || e.keyCode;
// Reference to shiftKey...
var shift_key = e.shiftKey;
// Reference to ctrlKey...
var ctrl_key = e.ctrlKey;
// Reference to altKey...
var alt_key = e.altKey;
switch (key) {
// Character -> ^
case 94:
return false;
// Character -> #
case 35:
return false;
// Character -> $
case 36:
return false;
// Character -> @
case 64:
return false;
// Character -> &
case 38:
return false;
// Character -> *
case 42:
return false;
// Character -> (
case 40:
return false;
// Character -> )
case 41:
return false;
// Character -> %
case 37:
return false;
// Character -> !
case 33:
return false;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<label for="text1">Numbers, Numberpad, Backspace & Tab ONLY:</label>
<input id="text1" type="text" placeholder="0" min="0" input pattern="[0-9]*" inputmode="numeric" value="" maxlength="4">
</form>Прочитав и попробовав много идей, ни одна из найденных мною работала не для того, чтобы показать точно клавиатуру только с цифрами и запятой или точкой.
Я закончил, используя только <input type="number"> и onkeyup обработчик на этом входе, где я делаю что-то вроде этого:
var previousValue = localStorage.getItem('myInputId');
if (input.getAttribute('type') === "number" && input.validity && input.validity.badInput) {
input.value = previousValue || "";
}
localStorage.setItem('myInputId', input.value);
Это не позволяет пользователю писать неправильные символы, заменяя значение предыдущим, если есть ошибка достоверности (я не знаю, является ли это объектом iOS или стандартом)
остерегайтесь, я не тестировал этот фрагмент кода, потому что у меня есть более сложные вещи на моей стороне, но я надеюсь, что вы поймете идею
С этим решением:
- На iOS: у пользователя полнофункциональная классическая клавиатура, но по умолчанию она открыта для цифр и не может писать неправильные символы.
- На Android цифровая клавиатура идеальна.
- В будущем мы можем надеяться, что iOS вызовет хорошую клавиатуру для цифр и что часть javascript никогда не будет вызываться.