Question

我想在按键更改文本框的输入时执行某些操作。我认为keypress事件最适合这个，但我怎么知道它是否引起了变化？我需要过滤掉按箭头键或修饰符之类的东西......我认为硬编码所有值都不是最好的方法。

那我该怎么做呢？

Answer 1

在大多数浏览器中，您可以将HTML5 input事件用于文本类型<input>元素：

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

这不适用于IE＆lt; 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!");
});

Answer 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");
});

Answer 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())
})

Answer 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();            
    }
}

我知道即使内容没有改变也会触发但是硬编码更容易，我不想让它工作的那些键。

仅捕获改变输入的按键？

4 个答案: