<input type="text">的值可以通过多种方式改变,包括:
按键 复制/粘贴 JavaScript修改 由浏览器或工具栏自动完成
我希望在JavaScript函数发生变化时调用它(使用当前输入值)。我希望它能马上被调用,而不是在输入失去焦点的时候。
我正在寻找最干净和最健壮的方法来跨所有浏览器(最好使用jQuery)。
<input type="text">的值可以通过多种方式改变,包括:
按键 复制/粘贴 JavaScript修改 由浏览器或工具栏自动完成
我希望在JavaScript函数发生变化时调用它(使用当前输入值)。我希望它能马上被调用,而不是在输入失去焦点的时候。
我正在寻找最干净和最健壮的方法来跨所有浏览器(最好使用jQuery)。
当前回答
绑定到输入事件似乎在大多数正常的浏览器中都能正常工作。IE9也支持它,但是实现有bug(删除字符时不会触发事件)。
在jQuery 1.7+版本中,on方法可以像这样绑定到事件:
$(".inputElement").on("input", null, null, callbackFunction);
其他回答
虽然这个问题是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');
您可以将'input'事件绑定到<input type="text">。这将在每次输入更改(如复制、粘贴、按键等)时触发。
$("#input-id").on("input", function(){
// Your action
})
这段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
您可以简单地识别表单中的所有更改者,如下所示
//when form change, show aleart
$("#FormId").change(function () {
aleart('Done some change on form');
});