HTML5: дополнительные символы ввода с типом = «число»

Question

В нашем приложении у нас есть много вкладов, которые используются для заполнения школьных классов. До сих пор мы имели

<input type="text" name="mark"> 

Как мы пытаемся использовать новые возможности HTML5, мы изменили его

<input type="number" name="mark"> 

так на мобильные телефоны/таблетки у нас есть интерфейс только с числами. И дело обстоит именно так. Можно добавлять во входные оценки типа «5+» и другие (например, некоторые двухбуквенные ярлыки «ab» и другие). Он настраивается пользователями.

Есть ли способ расширить ввод, чтобы обрабатывать номера и все эти символы как действительные С расширением клавиатуры клавиатуры Android/iOS только для этого?

EDIT:

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

Answer 1

Я считаю, что вы можете использовать атрибут шаблона для того, что вы описали:

Регулярное выражение, значение элемента управления сверяется. Шаблон должен соответствовать всему значению, а не только некоторому подмножеству. Используйте атрибут title, чтобы описать шаблон, чтобы помочь пользователю. Этот атрибут применяется, когда значением атрибута type является текст, поиск, tel, url или электронная почта; в противном случае он игнорируется. Язык регулярных выражений совпадает с языком JavaScript. Шаблон не окружен прямыми косыми чертами.

https://developer.mozilla.org/en/docs/Web/HTML/Element/Input

например, <input type="text" name="HasAPattern" pattern="[0-9A-Z]{3}" title="Enter 3 characters">

приведет к входному элементу, который допускает только 3 символа.

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

Пользовательские клавиатуры должны использоваться для нестандартных раскладок клавиатуры/кнопок ввода.

Answer 2

Возможно, вам понадобится только обычное текстовое поле и использовать что-то вроде JQuery Validate для ограничения ввода и выдачи предупреждений, если пользователь вводит неверные данные.

Другим вариантом было бы перетащить все возможные опции в тег HTML select.

JQuery Validate плагин: http://jqueryvalidation.org/

Answer 3

вы можете использовать

<input type="text" name="mark" pattern="[a-z0-9]{2}"> 

Вы можете указать регулярное выражение в структуре и имеют какой-либо символ в белый список

Для имеющих 50+ вид входа используйте после

<input type="text" name="mark" pattern="[0-9]{2}[+]?"> 

Answer 4

Вы могли бы просто u se,

<input type="tel" name="mark"> 

Это сделало бы это.