<input type = "number" /"> не показывает цифровую клавиатуру на iOS

Ответ 1

Вам нужно указать шаблон:

<input type="number" pattern="\d*"/>

Как и number, может также быть отрицательным или с плавающей точкой, поэтому - и . и , должны быть доступны на клавиатуре, если вы не укажете только шаблон с цифрами.

Ответ 2

Я не уверен, что это то, что вы хотите, но тип ввода = "tel" даст вам "телефонный номер".

Ответ 3

По моему опыту, это очень непоследовательно в браузерах. iOS пошла назад и вперед, поддерживая это правильно для моего варианта использования. Обычно я просто хочу, чтобы отображаемая по умолчанию клавиатура была числовой. В последний раз, когда я проверил, использование типа ввода = "число" правильно отображает цифровую клавиатуру, но атрибут "размер" игнорируется, что плохо отбрасывает мой мобильный формат. Я добавил атрибут ко всем входам, которые я предпочел бы использовать цифровую клавиатуру по умолчанию, и я использовал jQuery для изменения любых атрибутов (т.е. Type = "number" ), когда браузер обнаруживает, что он работает правильно. Таким образом, мне не нужно возвращаться и обновлять отдельные входы и разрешать применять его только в поддерживаемых браузерах.

Было бы здорово, если бы у основного мобильного устройства O/S был атрибут "клавиатура по умолчанию", кроме типа ввода. Что делать, если пользователь вводит адрес или почтовый индекс? Обычно они начинаются с цифр, поэтому по умолчанию отображается клавиатура с номером, но разрешается ЛЮБОЙ текст.

Что касается проверки, я не могу полагаться на браузер для поддержки проверки для определенных типов ввода, поэтому я использую проверку на основе JavaScript и серверной части.

Ответ 4

После прочтения и попыток много идей, ничто из того, что я нашел, не работало, чтобы точно показать клавиатуру с цифрами и комой или точкой.

Я закончил использовать только этот <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 никогда не будет вызвана.

Ответ 5

Привет. Я знаю, что этот вопрос старый, но я почувствовал его очень популярное решение и решил опубликовать ответ.

Здесь решение, которое я создал для , на клавиатуре 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>