Недавно мне нужно было написать обычный…
Недавно мне нужно было написать обычный счетчик символов в текстовой области (textarea). Задача тривиальная, но меня заинтересовал один нюанс. Вопрос в том, какое событие обрабатывать? Пользователь может вводить текст как угодно, с помощью клавиатуры, вставлять из буфера обмена. Если ввод происходит с помощью клавиатуры или из буфера комбинацией клавиш Ctrl+V, то можно обрабатывать событие onKeyup. Но если текст вставлен с помощью контекстного меню, то onKeyup не работает (действительно, ведь клавиатуру мы не трогаем). Точно также не имеет смысла обрабатывать события мыши. Ведь клик выполняется по контекстному меню, а обработчик мы назначаем для textarea. Событие onChange тоже не подходит, т. к. оно появляется после того как textarea теряет фокус. В результате получается, что отследить вставку данных через контекстное меню с помощью этих событий не получится. Но я решил поискать. И прежде всего, отправился поэкспериментировать с формой twitter’а. Первый же эксперимент дал положительный результат. Вставка через контекстное меню изменила значение счетчика.
Сначала я подумал, что они решают задачу с помощью таймера и проверок длины поля через заданный интервал времени. Но потом я заметил, что эта функция работает только в FireFox и не работает в IE. А чем отличается Firefox от IE? Конечно, поддержкой новых стандартов! После этого я быстро нашел нужное событие. Оно называется input и определено в спецификации DOM Level 3 Load And Save. Это событие возникает сразу после ввода любых символов в поле не зависимо от способа ввода. Чтобы не оставаться голословным я привожу страницу, с которой экспериментировал.