Могу ли я добавить элементы HTML5 в существующие документы HTML? - PullRequest
Новая
       1

Могу ли я добавить элементы HTML5 в существующие документы HTML?

3 голосов
/ 11 января 2012

Итак, у меня есть HTML-страница с полем для последних 4 цифр кредитной карты: 

<input value="" name="Last4ofCC" maxlength="4" id="Last4ofCC1">

Отлично работает, но только что пришел запрос на добавление, чтобы сделать его числовым полем и запретить использование нечисловых символов.

Сначала я подумал о подключении некоторого Javascript, но потом подумал, почему бы просто не использовать элемент HTML5. Я изменил на следующее: 

<input type="number" value="" name="Last4ofCC" max="4" id="Last4ofCC1">

Но он не только допускает использование нечисловых символов, но и атрибут max тоже не работает! Я тестирую это на FireFox 8, поэтому не уверен, в чем проблема.

Кто-нибудь знает, что я здесь не так сделал?

Ответы [ 6 ]

6 голосов
/ 11 января 2012

Вы должны указать правильный тип документа в верхней части своей страницы в дополнение к изменению типов ввода. 

<!DOCTYPE html>

Тем не менее, он не будет делать то, что вы думаете, он собирается. Установка входа как type="number" в значительной степени только даст вам счетчики на стороне и скажет форме, какой он должен Если вы хотите убедиться, что вводятся только цифры, вам нужно выполнить регулярное выражение, например /^\d+$/ при вводе ключа.

Подробнее о HTML5

2 голосов
/ 11 января 2012

Да, вы можете добавить функции HTML5 на существующие страницы.Поддержка их браузерами, по крайней мере, в настоящее время, не зависит от того, какие doctype материалы вы можете иметь или не иметь в начале вашей страницы.1004 * для чтения четырех цифр.Он предназначен для чтения числовых данных, и он с радостью примет 42, не требуя, например, больше цифр.Более того, пользовательский интерфейс может даже запутать пользователя.Но если вы используете type="number", вы должны в этом случае установить min="0" и max="9999".

Лучшая конструкция HTML5 - pattern="[0-9]{4}" required.Предполагается выполнить проверку ввода, проверяя, что он состоит ровно из четырех цифр.Это должно происходить даже тогда, когда JavaScript отключен.

Поскольку поддержка браузера все еще довольно ограничена, рекомендуется также использовать JavaScript-проверки для удобства пользователя.

1 голос
/ 13 января 2012

Ответ Джейсона в основном правильный. Тем не менее, вы не должны делать проверку на keyup, если пользователь не нуждается в дополнительной помощи. Я автор h5Validate. В процессе улучшения коэффициентов конверсии в большой производственной корзине покупок мы обнаружили, что пользователи запутываются, если видят сообщение об ошибке проверки, когда они все еще пытаются набрать число.

h5Validate сначала запускает проверку при изменении, и если значение недопустимо, он добавляет keyup, чтобы помочь пользователю корректировать поле при каждом нажатии клавиши. Похоже, это мелочь, но разница в доходах для крупномасштабных систем корзин покупок исчисляется миллионами долларов в год.

1 голос
/ 11 января 2012

'max' указывает максимально допустимое значение, а не максимальное количество символов.

0 голосов
/ 11 января 2012

Вы можете проверить последнюю поддержку форм для Firefox здесь (это должна быть поддержка):

https://developer.mozilla.org/en/HTML/Forms_in_HTML

Также проверьте:

http://caniuse.com/#search=form%20validation

Этот плагин jQuery добавит поддержку всех браузеров. Это безопасный подход, который все еще использует синтаксис HTML5:

http://ericleads.com/h5validate/

Удачи!

0 голосов
/ 11 января 2012

Ничего, насколько я знаю, Firefox пока не поддерживает их, http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29. Попробуйте Chrome, чтобы увидеть эффект.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...