Показать цифровую клавиатуру в iPhone с помощью ввода текста

Обратите внимание, что использование input type="number" может отображать цифровую клавиатуру, как показано ниже:

enter image description here

Можно ли использовать input type="text" для отображения одной и той же цифровой клавиатуры? я не нужно отображать цифровую панель с помощью pattern="\d*", потому что возможно, что значение будет содержать десятичное место.

Причина, по которой я хотел бы использовать input type="text" вместо input type="number", заключается в том, что я не могу вернуть значение, если я вводил не число для числа. Например, если я введу ABC, он автоматически станет пустым. Мне кажется, что использование input type="text" будет проще для такого управления.

Ответы

Ответ 1

Если ваш ввод является истинным числом, целочисленным или десятичным, используйте вход HTML5 type="number". Это приведет к правильной клавиатуре на устройствах Android (предположим, что телефон Windows тоже).

Тогда трюк состоит в том, чтобы поместить этот pattern="[0-9]*" в этот атрибут, чтобы заставить специальную цифровую клавиатуру на iOS. Обратите внимание:

  • Это не будет означать знак десятичного или минус как недопустимый, поскольку атрибут pattern не действителен в поле type = "number"! и
  • Это единственный способ получить цифровую клавиатуру iOS. См. Разницу между секцией номера альфа-клавиатуры (как показано на скриншоте выше) по сравнению с настоящей цифровой клавиатурой.

iOS number keyboards compared

В последнем примечании обязательно НЕ используйте поле типа номера для входов, которые не являются истинными числами (например, zipcodes с ведущими нулями или кодами продуктов с комами или пробелами). Числовое поле ввода НЕ МОЖЕТ ПОДКЛЮЧИТЬ значения, которые не являются истинными числами! (в зависимости от браузера/устройства)

Ответ 2

используйте этот код:

<input type="number" pattern="[0-9]*" />

Ответ 3

Существуют и другие типы, которые могут отображать числовую клавиатуру.

С типом = "число" вы ничего не можете сделать. Он не примет ничего, кроме цифр. Но если вы используете type = "tel", это уродливый взлом, но он работает.

Вот пример моего почтового индекса:

<input type="tel" id="Address_ZipCode" class="zip-code" pattern="^\d{2}-\d{3}$" maxlength="6">

Тем не менее, существует проблема с клавишей "-" на некоторых экранных клавиатурах, вы можете обойти эту проблему, добавив тире после указанного количества символов в JavaScript, например:

// Zip Code dashes
$('input[type="tel"].zipCode').keyup(function(event) {
    var t = event.target, v = t.value;
    if (v.length == 2) { t.value = v + '-'; }
});

(Извините jQuery). Вместо использования type = "tel" вы можете использовать type = "text" и свойство pattern, но я еще не тестировал его. Скорее всего, это не сработает с большинством браузеров.

Ответ 4

Я не смог найти решение для этого на данный момент.

Но один возможный трюк, который вы могли бы сделать, это использовать type = "number" и изменить его в javascript с помощью document.getElementById( "element" ). type = "text";

но, тем не менее, это также очистит ABC, но оно будет принимать запятые и десятичные числа чисел

Ответ 5

Попробуйте этот рабочий стол. Работал для меня.

Он превратит тип в число, а затем вернется к тексту. Это заставит ios переключиться на числовой ключ на первом изменении прокрутки. setSelectionRange предназначен для выбора входного значения.

$(function(){

    $("input[type='text']").on('mouseup', function(e){
        e.preventDefault();
    });

    $("input[type='text']").on('focus click', function(e){
        $(this).prop('type', 'number');
        var obj = $(this);
        setTimeout(function(){
            obj.prop('type', 'text');
            document.getElementById(obj.attr('id')).setSelectionRange(0, 9999);
        }, 50);     
    });
});

Ответ 6

Цифровая клавиатура, предоставляемая Apple на iOS, - грустная шутка. Но вы можете исправить это используя:

inputmode="decimal"

Отлично работает на Android, конечно.

:)