Событие onKeyPress не работает на iPad и iPhone 
Столкнулся с неприятным поведением некоторых моих веб-калькуляторов на iPad. В частности на полях где реализовано ограничение по вводимым символам (например, только цифры или только буквы) функция фильтрации не выполняется вообще. Оказалось причина в том, что экранная клавиатура на iPad и iPhone не генерирует JavaScript событие keypress. Далее несколько идей о том как решить эту проблему.
Начну с того, что само решение ограничивать пользователя при вводе данных идея не очень хорошая. Не всегда посетитель сайта может догадаться о том, что от него требуется вводить только цифры или буквы. Да и решение делать ограничение через key code не самое лучшее. Намного правильнее разрешить пользователю вводить что угодно, но при submit-е формы проверять введенные значения и указывать на ошибки. Для пользователя подобное поведение привычнее и понятнее.
Исходя из сказанного первое решение, которое видится мне в этой ситуации, отказаться от onKeyPress события вообще.
Но если отказаться от описанного выше поведения никак не получается, то второй вариант решения - это проверять введенные пользователем данные по интервалу времени, скажем через функцию setInterval. Здесь главное подобрать разумный интервал времени, так чтобы посетитель не подумал, что сайт сбрендил и удаляет введенные данные.
Других решений я пока предложить не могу, поэтому если есть идеи, то милости прошу в комментарии.
подписаться на блог
Evgeny Sergeev
Веб-разработчик, автор блога codeart.ru
Кстати, данный пост был набран на iPad.
Sergey
Гость
Чем вас input type=”number” не устроил?
+ его ещё в том что вызывается сразу цифровая клавиатура
http://www.html5tutorial.info/html5-number.php
Sergey
Гость
как дополнение к предыдущему комментарию http://www.html5rocks.com/en/tutorials/forms/html5forms/ и ошибки отображать можно через css псевдо селектор :invalid
Evgeny Sergeev
Веб-разработчик, автор блога codeart.ru
Sergey, всем устроил, просто html5 я не очень хорошо знаю. надо разбираться с этим вопросом
Evgeny Sergeev
Веб-разработчик, автор блога codeart.ru
Поставил type=”number”. На разных браузерах ведет себя немного по-разному.
Sergey
Гость
Про кроссбраузерность этих полей я не говорил, с полем type=”search”, к примеру, вообще почти не возможно работать (background-images не поставишь, на iOs слетает закругление углов из за этого).
Но свою главную функцию - определять тип вызываемой клавиатуры и валидацию, почти все браузеры выполняют
Evgeny Sergeev
Веб-разработчик, автор блога codeart.ru
Sergey, на iPad работает лучше всего. На Опере под андроидом добавляются символы “+” “-”, которые выглядят довольно некрасиво.
Leave a Reply