JQuery: обнаружение изменений в поле ввода

Возможный дубликат:
JQuery: как было обнаружено содержимое текстового поля

Я хочу определить, когда действия клавиатуры пользователя изменяют значение текстового поля. Он должен работать последовательно в современных браузерах.

На странице JQuery для события .keypress указано, что это не согласовано? Кроме того, он не работает для backspace, удаляет и т. Д.

Я не могу использовать .keydown, потому что он реагирует на клавиши shift, alt и стрелки и т. Д. Кроме того, он не срабатывает более одного раза, когда пользователь удерживает клавишу и вставлены несколько символов.

Есть ли сжатый метод, который я пропускаю? Или я должен использовать .keydown и отфильтровывать события, которые запускаются клавишами со стрелками, сдвигом и т. Д.? Моя основная проблема заключается в том, что будут ключи, которые я не знаю, должны быть отфильтрованы. (Я почти забыл о alt и ctrl, я полагаю, что могут быть и другие). Но тогда как бы я обнаружил, что ключ удерживается и вставляет несколько символов?

В качестве бонуса он обнаружил бы изменения из-за вставки (включая щелчок правой кнопкой мыши), но у меня есть решение отсюда .

5 Solutions collect form web for “JQuery: обнаружение изменений в поле ввода”

Вы можете связать событие ввода с текстовым полем. Это будет срабатывать при каждом изменении ввода, поэтому, когда вы вставляете что-то (даже щелчком правой кнопки мыши), удаляйте и вводите что-либо.

$('#myTextbox').on('input', function() { // do something }); 

Если вы используете обработчик change , это будет срабатывать только после того, как пользователь отменит выбор поля ввода, что может быть не таким, каким вы хотите.

Вот пример и здесь: http://jsfiddle.net/6bSX6/

Использовать событие изменения jquery

Описание: привязать обработчик события к событию JavaScript «change» или вызвать это событие для элемента.

Пример

 $("input[type='text']").change( function() { // your code }); 

Преимущество, .change имеет .change над .keypress , .focus , .blur – это то, что событие .change срабатывает только при изменении ввода

Та же функциональность, которую я недавно достиг, используя функцию ниже.

Я хотел включить кнопку SAVE при редактировании.

  1. Событие изменения НЕ рекомендуется, так как оно будет ТОЛЬКО запускаться, если после редактирования щелчок мыши будет нажат где-то еще на странице, прежде чем нажать кнопку SAVE.
  2. Key Press не обрабатывает опции Backspace, Delete и Paste.
  3. Key Up обрабатывает все, включая вкладку, клавишу Shift.

Следовательно, я написал ниже функцию, сочетающую keypress, keyup (для backspace, delete) и вставки события для текстовых полей.

Надеюсь, это поможет вам.

 function checkAnyFormFieldEdited() { /* * If any field is edited,then only it will enable Save button */ $(':text').keypress(function(e) { // text written enableSaveBtn(); }); $(':text').keyup(function(e) { if (e.keyCode == 8 || e.keyCode == 46) { //backspace and delete key enableSaveBtn(); } else { // rest ignore e.preventDefault(); } }); $(':text').bind('paste', function(e) { // text pasted enableSaveBtn(); }); $('select').change(function(e) { // select element changed enableSaveBtn(); }); $(':radio').change(function(e) { // radio changed enableSaveBtn(); }); $(':password').keypress(function(e) { // password written enableSaveBtn(); }); $(':password').bind('paste', function(e) { // password pasted enableSaveBtn(); }); } 

Используйте $.on() чтобы привязать выбранное событие к входу, не используйте сочетания клавиш, такие как $.keydown() т. Д., Потому что из jQuery 1.7 $.on() является предпочтительным методом присоединения обработчиков событий (см. Здесь: http://api.jquery.com/on/ и http://api.jquery.com/bind/ ).

$.keydown() – это просто ярлык для $.bind('keydown') , а $.bind() – это то, что $.on() заменяет (среди других).

Чтобы ответить на ваш вопрос, насколько мне известно, если вам не нужно специально keydown мероприятие в режиме keydown , событие change должно сделать трюк для вас.

 $('element').on('change', function(){ console.log('change'); }); 

Чтобы ответить на приведенный ниже комментарий, событие change javascript описано здесь: https://developer.mozilla.org/en-US/docs/Web/Events/change

И вот рабочий пример события change работающего над элементом ввода, с использованием jQuery: http://jsfiddle.net/p1m4xh08/

Вы можете использовать функцию jQuery change ()

 $('input').change(function(){ //your codes }); 

Существуют примеры того, как использовать его на странице API: http://api.jquery.com/change/

Давайте будем гением компьютера.