Поймать только нажатия клавиш, которые меняют ввод?

Я хочу что-то сделать, когда нажатие клавиши изменяет ввод текстового поля. Я считаю, что событие keypress было бы лучше для этого, но как узнать, вызвало ли это изменение? Мне нужно отфильтровать такие вещи, как нажимать клавиши со стрелками или модификаторы... Я не думаю, что жесткое кодирование всех значений является наилучшим подходом.

Итак, как мне это сделать?

Ответы

Ответ 1

В большинстве браузеров вы можете использовать событие HTML5 input для текстового типа <input>:

$("#testbox").on("input", function() {
    alert("Value changed!");
});

Это не работает в IE < 9, но есть обходное решение: событие propertychange.

$("#testbox").on("propertychange", function(e) {
    if (e.originalEvent.propertyName == "value") {
        alert("Value changed!");
    }
});

IE 9 поддерживает оба варианта, поэтому в этом браузере лучше предпочесть стандартное событие input. Это удобно запускается первым, поэтому мы можем удалить обработчик для propertychange при срабатывании input.

Объединяя все это (jsFiddle):

var propertyChangeUnbound = false;
$("#testbox").on("propertychange", function(e) {
    if (e.originalEvent.propertyName == "value") {
        alert("Value changed!");
    }
});

$("#testbox").on("input", function() {
    if (!propertyChangeUnbound) {
        $("#testbox").unbind("propertychange");
        propertyChangeUnbound = true;
    }
    alert("Value changed!");
});

Ответ 2

. change() - это то, что вы после

$("#testbox").keyup(function() {
   $(this).blur();
   $(this).focus(); 
   $(this).val($(this).val()); // fix for IE putting cursor at beginning of input on focus
}).change(function() {
   alert("change fired");
});

Ответ 3

Вот как я это сделаю: http://jsfiddle.net/JesseAldridge/Pggpt/1/

$('#input1').keyup(function(){
    if($('#input1').val() != $('#input1').attr('prev_val'))
        $('#input2').val('change')
    else
        $('#input2').val('no change')
    $('#input1').attr('prev_val', $('#input1').val())
})

Ответ 4

Я придумал это для автосохранения текстового поля. Он использует комбинацию метода .keyUp() jQuery, чтобы узнать, изменилось ли содержимое. И затем я обновляюсь каждые 5 секунд, потому что я не хочу, чтобы форма получалась при каждом изменении!

var savePost = false;

jQuery(document).ready(function() { 
    setInterval('autoSave()', 5000)
    $('input, textarea').keyup(function(){
        if (!savePost) {
            savePost = true;    
        }
    })
})


function autoSave() {
    if (savePost) {
        savePost = false;
        $('#post_submit, #task_submit').click();            
    }
}

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