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

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

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

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


当前回答

绑定到输入事件似乎在大多数正常的浏览器中都能正常工作。IE9也支持它,但是实现有bug(删除字符时不会触发事件)。

在jQuery 1.7+版本中,on方法可以像这样绑定到事件:

$(".inputElement").on("input", null, null, callbackFunction);

其他回答

下面是一个工作示例,我使用它来实现一个填充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的解决方案(它真的很过时,现在没有必要了)

使用事件“input”,你可以查找任何类型的变化:

删除,后退,粘贴,输入,任何会改变输入值的东西。

输入事件与文本输入直接相关。当文本以任何方式被更改时,输入就会被分派。

document.querySelector(“# testInput”)。addEventListener(“输入”,测试); 功能测试(e) { var a = document.getElementById('output'); a.innerText += "检测到更新!\n"; } <输入id = " testInput " > < br > <一个id = "输出" > < / >

实际上,我们不需要设置循环来检测javaScript更改。 我们已经为要检测的元素设置了许多事件监听器。只要触发任何联合国有害事件就能完成这项工作。

$("input[name='test-element']").on("propertychange change click keyup input paste blur", function(){
console.log("yeh thats worked!");
});

$("input[name='test-element']").val("test").trigger("blur");

ofc只有在你对项目的javascript更改有完全控制的情况下才可用。

如果你不喜欢其他答案,这里有一个稍微不同的解决方案:

var field_selectors = ["#a", "#b"];
setInterval(function() { 
  $.each(field_selectors, function() { 
    var input = $(this);
    var old = input.attr("data-old-value");
    var current = input.val();
    if (old !== current) { 
      if (typeof old != 'undefined') { 
        ... your code ...
      }
      input.attr("data-old-value", current);
    }   
  }   
}, 500);

考虑到您不能依赖于单击和键up来捕获上下文菜单粘贴。

你就不能用<span contenteditable="true" spellcheck="false">元素来代替<input type="text">吗?

<span>(以contenteditable="true" spellcheck="false"作为属性)与<input>区别很大,主要是因为:

它的样式不是<input>。 它没有value属性,但文本被呈现为innerText,并成为其内部主体的一部分。 它是multiline,而<input>不是,尽管你设置了属性multiline="true"。

要完成外观,当然,你可以用CSS样式,而将值写成innerText,你可以为它获得一个事件:

这是小提琴。

不幸的是,有一些东西在IE和Edge中实际上不起作用,我无法找到。