<input type="text">的值可以通过多种方式改变,包括:
按键 复制/粘贴 JavaScript修改 由浏览器或工具栏自动完成
我希望在JavaScript函数发生变化时调用它(使用当前输入值)。我希望它能马上被调用,而不是在输入失去焦点的时候。
我正在寻找最干净和最健壮的方法来跨所有浏览器(最好使用jQuery)。
<input type="text">的值可以通过多种方式改变,包括:
按键 复制/粘贴 JavaScript修改 由浏览器或工具栏自动完成
我希望在JavaScript函数发生变化时调用它(使用当前输入值)。我希望它能马上被调用,而不是在输入失去焦点的时候。
我正在寻找最干净和最健壮的方法来跨所有浏览器(最好使用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>");
}
});
});
其他回答
绑定到输入事件似乎在大多数正常的浏览器中都能正常工作。IE9也支持它,但是实现有bug(删除字符时不会触发事件)。
在jQuery 1.7+版本中,on方法可以像这样绑定到事件:
$(".inputElement").on("input", null, null, callbackFunction);
这段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()。
jQuery >= 1.7的实时解决方案已经启动
$("#input-id").on("change keyup paste", function(){
dosomething();
})
如果你还想检测“点击”事件,只需:
$("#input-id").on("change keyup paste click", function(){
dosomething();
})
如果你使用jQuery <= 1.6,使用bind或live代替on。
不幸的是,我认为setInterval胜出了:
<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>
这是最简洁的解决方案,只有一行代码。它也是最健壮的,因为您不必担心输入可以获得值的所有不同事件/方式。
在这种情况下,使用'setInterval'的缺点似乎并不适用:
100ms的延迟?对于许多应用程序来说,100ms已经足够快了。 增加了浏览器的负载?一般来说,在页面上添加大量的重量级setinterval是不好的。但在这种特殊情况下,无法检测到添加的页面负载。 它不能扩展到很多输入?大多数页面的输入不超过几个,您可以在同一个setInterval中嗅探所有输入。
如果你不喜欢其他答案,这里有一个稍微不同的解决方案:
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来捕获上下文菜单粘贴。