Вход HTML5 вводит “число” в Firefox
Я работаю над приложением, которое только используется несколькими внутренними людьми, таким образом, я чувствую себя комфортно, говоря им только использовать Firefox или Chrome, таким образом, я могу использовать HTML5.
Я работал над очень простой функцией:
<style>
input:invalid { background-color: red; }
div.box {
border-color:#000;
border-width:thin;
border-style:solid;
}
</style>
<input type="number" name="id"> <small>(if the box becomes red, make sure you didn't put a space)</small>
Это работает отлично в Chrome: это становится красным и не позволит Вам отправить без меня кодирующий что-либо еще.
Firefox... не так. Это действует, как будто у меня был "текстовый" тип.
Это - известная проблема? Обходное решение?
Спасибо
3 ответа
Прежде всего, вы используете Firefox 4? Формы HTML5 имеют гораздо лучшую поддержку в версии 4.
Эта страница содержит подробную информацию о формах HTML5 и текущих ошибках. https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
Обновление: если браузер не поддерживает функции HTML5, которые вы хотите использовать, попробуйте Modernizr . Он использует Javascript для улучшения поддержки. В документации есть информация о типах ввода .
Это известная проблема?
Да. Неизвестные типы рассматриваются как текст. (А типы, которые появляются только в черновых спецификациях, обычно неизвестны многим браузерам)
Обходной путь?
Ни один браузер еще не получил этого. Пробег может быть разным, но во всех браузерах определенно есть над чем работать.
Opera покажет вам пользовательский интерфейс, позволяющий вам нажимать стрелки вверх и вниз, чтобы увеличить или уменьшить число. Однако вы можете отправить форму, даже если было введено что-либо, кроме числа. Доступность пока не идеальна, но, по крайней мере, вы можете использовать стрелки клавиатуры для увеличения и уменьшения числа.
В Chrome пока нет пользовательского интерфейса для числа, поэтому нет ни подсказки, ни визуального намека на то, что ожидается число. В Chrome также нет реального сообщения об ошибке. По умолчанию красная рамка ввода явно недостаточно хороша, и она совершенно недоступна. Chrome, по сути, является худшим нарушителем из всех браузеров, когда дело доходит до доступности, например, нулевая поддержка ARIA.
Вы используете псевдокласс :invalid, чтобы сделать весь виджет ввода красным. Пожалуйста, поймите, что это может быть понятнее, чем стилизация по умолчанию в Chrome, но это все равно не является доступным решением. Поскольку Chrome не поддерживает ARIA, плохая новость заключается в том, что даже если вы предоставите текстовое сообщение об ошибке через JavaScript, слепой пользователь или любой другой, использующий экранное устройство чтения, может вообще его не услышать.
Firefox, возможно, поздно включился в эту игру, но, пожалуйста, признайте тот факт, что Mozilla имеет очень строгие критерии доставки для своих функций, в то время как Chrome играет, не задумываясь о последствиях.