Ограничивая длину ввода текстового поля свойством maxlength, как явно обработать событие, когда максимальная длина была превышена? - PullRequest
Новая
       26

Ограничивая длину ввода текстового поля свойством maxlength, как явно обработать событие, когда максимальная длина была превышена?

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

Моя цель состоит в том, чтобы ограничить ввод пользователя (который является свободным текстом) внутри простого текстового поля HTML до 5 символов.Я использую свойство maxlength поля ввода, чтобы , но мне нужно отобразить всплывающее окно , когда пользователь пытается ввести более 5 символов.

Я пытался обработать события keydown , но тогда пришлось бы добавить некрасивое if-else, чтобы не учитывать del, enter, F1..F12, Alt, PageDn и т. Д., Поскольку все это разрешено, но не влияет на длину текста. Их коды клавиш также не находятся в одной последовательности.Я пытался обработать его на keyup , но к тому времени этот символ уже набран, и пользователь видит, что лишний символ исчезает ... не то, что я хочу... то, что будет работать на IE7,8 было бы очень полезно.

1 Ответ

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

В gecko (например, firefox) браузер предотвращает увеличение значения при использовании атрибута maxlength, поэтому переменная проверки tooLong всегда будет false (см. здесь ). Там нет шансов зацепить там.
Но вместо этого вы можете использовать pattern -атрибут: 

<input ... pattern="^.{0,max}$" />

Замените max в регулярном выражении pattern количеством максимально допустимых символов.
Теперь вы можете связать событие input и проверить логическое значение element.validity.patternMismatch, если значение слишком длинное.

Вот ссылки на два примера, которые я создал для вас; они протестированы с текущими версиями Firefox и Chrome, я не могу протестировать с IE9:

  • первый пример : если значение будет длинным, оно будет обрезано и в течение одной секунды будет отображаться сообщение об ошибке; небольшим недостатком является то, что вы можете увидеть ввод в доли секунды.
  • во втором примере значение никогда не изменится, будет отображаться сообщение об ошибке до тех пор, пока количество символов не будет правильным, и вы можете отправить форму, только если все поля действительны.

=== ОБНОВЛЕНИЕ ===

Для поддержки IE7 и IE8 я обновил примеры:

...