HTML5 Тип ввода = число удаляет начальный ноль

Question

В Chrome 15 при использовании элемента в качестве текстового поля начальные нули (например, 011) удаляются, даже если введенное число не нарушает правила проверки (например, min, max). Есть ли атрибут, заставляющий ноль оставаться в поле после потери фокуса? Приложение для этого - числовые данные, такие как международные телефонные префиксы.

Answer 1

<input type="text" pattern="[0-9]*" ...

это должно сделать это для вас. Появится цифровая клавиатура на iPhone и на более красивых телефонах с Android, которые я тестировал.

Answer 2

<input type="tel"> был введен именно для этой цели. Это один из новых типов ввода в HTML5.

Answer 3

Мне это было нужно для мобильных браузеров, и я использовал сочетание обоих решений, таких как:

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

В iOS на цифровой клавиатуре отображаются только доступные цифры (без символов # или *), тогда как на AndroidТелефоны, «тел» правильно интерпретируется, но не шаблон (еще не на тех немногих телефонах, которые у меня есть).

Я предполагаю, что когда браузеры Android начнут реализовывать атрибут «шаблон», это должно нормально работать наandroid тоже (как в спецификации whatwg предлагает ).

До этого вам придется проверять наличие нецифровых символов во входных данных и удалять их.Для этого полезно заменить javascript (/ [^ 0-9 *] / g, '').

надеюсь, это поможет

Answer 4

Ответ, который WHATWG предоставил мне в IRC, состоял в том, что для нечисловых (например, не float / int) данных, которые имеют числовой характер, текст, как правило, является правильным типом ввода для использования. Исключением является то, что вы используете что-то, для чего уже существует определенный тип ввода (например, телефонные номера, даты).

тип ввода = число следует использовать только для входных данных, которые являются буквально числами (int), а не данными, которые используют цифры (например, почтовые индексы).

Answer 5

8 лет спустя ...

Внимание:
Ответы с использованием type="tel" не полностью не решают проблему, особенно в случае числовых полей, где вы можете захотеть записать плавающие / десятичные числа и другие разрешенные символы (например, + -.,).

Решение:
Попробуйте использовать текстовый ввод с шаблоном и режимом ввода, например:

<input type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">

подробности:
Шаблон, который будет там, поможет сохранить начальные 0 и вести себя как числовое поле (со всеми другими разрешенными символами).
И inputmode="numeric" будет тянуть цифровую клавиатуру вместо стандартной.