<input type="text">的值可以通过多种方式改变,包括:

按键 复制/粘贴 JavaScript修改 由浏览器或工具栏自动完成

我希望在JavaScript函数发生变化时调用它(使用当前输入值)。我希望它能马上被调用,而不是在输入失去焦点的时候。

我正在寻找最干净和最健壮的方法来跨所有浏览器(最好使用jQuery)。


当前回答

把这段代码添加到某个地方,就可以了。

var originalVal = $.fn.val;
$.fn.val = function(){
    var result =originalVal.apply(this,arguments);
    if(arguments.length>0)
        $(this).change(); // OR with custom event $(this).trigger('value-changed');
    return result;
};

发现这个解决方案在val()不触发change()在jQuery

其他回答

下面是一个工作示例,我使用它来实现一个填充jqueryui选择器(列表)的自动补全变体,但我不希望它的功能完全像jqueryui自动补全那样做一个下拉菜单。

$("#tagFilter").on("change keyup paste", function() {
     var filterText = $("#tagFilter").val();
    $("#tags").empty();
    $.getJSON("http://localhost/cgi-bin/tags.php?term=" + filterText,
        function(data) {
            var i;
            for (i = 0; i < data.length; i++) {
                var tag = data[i].value;
                $("#tags").append("<li class=\"tag\">" + tag + "</li>");
            }
        }); 
});

这段jQuery代码使用.bind()来捕获对任何元素的即时更改,并且应该在所有浏览器上工作:

 $('.myElements').each(function() {
   var elem = $(this);

   // Save current value of element
   elem.data('oldVal', elem.val());

   // Look for changes in the value
   elem.bind("propertychange change click keyup input paste", function(event){
      // If value has changed...
      if (elem.data('oldVal') != elem.val()) {
       // Updated stored value
       elem.data('oldVal', elem.val());
    
       // Do action
       ....
     }
   });
 });

但是,请注意.bind()在jQuery 3.0版本中已弃用。任何使用jQuery 1.7或更新版本的人都应该使用.on()。

把这段代码添加到某个地方,就可以了。

var originalVal = $.fn.val;
$.fn.val = function(){
    var result =originalVal.apply(this,arguments);
    if(arguments.length>0)
        $(this).change(); // OR with custom event $(this).trigger('value-changed');
    return result;
};

发现这个解决方案在val()不触发change()在jQuery

好吧,最好的办法就是把你自己列出的三个基础都做一遍。一个简单的:onblur,:onkeyup等不会为你想要的工作,所以只是把它们结合起来。

KeyUp应该涵盖前两个,如果Javascript正在修改输入框,我当然希望它是你自己的Javascript,所以只需在修改它的函数中添加一个回调。

虽然这个问题是10年前发布的,但我认为它仍然需要改进。这就是我的解。

$(document).on('propertychange change click keyup input paste', 'selector', function (e) {
    // Do something here
});

这个解决方案的唯一问题是,它不会触发从javascript的值改变,如$('selector')。瓦尔(“价值”)。当你从javascript中改变值时,你可以触发任何事件到你的选择器。

$(selector).val('some value');
// fire event
$(selector).trigger('change');

或者排成一行

$(selector).val('some value').trigger('change');