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

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

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

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

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

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

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

Невозможно изменить событие изменения, поскольку оно будет ТОЛЬКО запускаться, если после редактирования щелчок мыши будет нажат где-то еще на странице, прежде чем нажать кнопку SAVE.
Key Press не обрабатывает опции Backspace, Delete и Paste.
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();
    });


}

Ответ 3

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

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

Пример

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

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

Ответ 4

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

$.keydown() - это просто сокращение от $.bind('keydown'), а $.bind() - это то, что $.on() заменяет (среди прочих).

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

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

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

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

Ответ 5

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

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

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