Рассмотрим типичную задачу при разработке сайта – контроль данных вводимых пользователем в текстовые поля. Чаще всего такую задачу решают просто – устанавливают перехватчик события onKeyUp или onKeyPress. В перехватчике делают контроль вводимых данных в режиме реального времени, после каждого нажатия на клавишу. Однако такой способ недостаточно корректен, так как происходит отслеживание события «нажатие на клавишу», а не события «ввод данных в текстовое поле». Я говорю о том, что сам процесс ввода данных в текстовое поле может осуществляться разными способами:
- Ввод текста с клавиатуры
- Вставка текста из буфера обмена с помощью сочетаний клавиш или контекстного меню.
- Подстановка текста различными программами (например, программы для хранения личных данных)
Очевидно, что решение задачи с помощью перехвата только клавиатуры охватывает лишь половину доступных пользователю способов ввода. Конечно, можно создать перехватчик события нажатия правой кнопки мыши, однако это не защитит от программ, вводящих текст автоматически. Более того исторически сложилось так, что в Opera перехватчик события нажатия правой кнопки мыши не работает.
Самое эффективное решение этой задачи – это использование плагина jQuery TextChange. Он создает событие TextChange для изменения текста в input и textarea. Плагин протестирован на последних Opera, Safari, Chrome, FireFox и IE 6-9.
Для того чтобы перехватить событие ввода данных в конкретное текстовое поле необходимо воспользоваться методом jQuery .bind()
- $(document).ready(function() {
- $('.classOfTextField').bind('textchange', function() {
- // какие-то действия
- return true;});
- });
Больше примеров использования можно найти здесь: http://www.zurb.com/playground/jquery-text-change-custom-event
Плагин в исходниках: https://gist.github.com/424774
Минимальная версия плагина: http://www.zurb.com/javascripts/plugins/jquery.textchange.min.js
Рекомендую воспользоваться этим плагином, а не изобретать свои велосипеды, особенно если Вы уже используете jQuery. Размер минимальной версии 1.4 Кб.
Спасибо большое
А как контролировать передыдущий ввод, когда строка выходит за пределы поля страницы и портит Ваш дизайн?
Надеюсь Вы мне ответите. С уважением, Владимир Вопросов.
Владимир, мне кажется, что если строка выходит за пределы страницы, то тут надо фиксить css-средствами.
А вообще в каком случае такое может быть? я использовал указанный здесь способ, повесил свой обработчик на событие. Если страница загружается с уже заполненными полями (всякое бывает), то тот же обработчик вызывается в $(document).ready(function(){});
То что на этом сайте — это уже старая проблема, думаю что это косяк автора. Хотя сам как то искал кроссбраузерное решение этой проблемы так и не нашел. единственное задавать перенос строк через css для современных браузеров и насильно вставлять br через javascript для старых браузеров.
Спасибо большое за обстоятельный ответ.
Я пробовал решать эту задачу в том числе и через css, но результата не добился. Похоже это старая и не разрешимая проблема.
А не могли бы Вы показать конкретное решение этой задачки через css или
javascript если такое имеется.
С уважением. Владимир.
спасибо