<input type="text">的值可以通过多种方式改变,包括:
按键 复制/粘贴 JavaScript修改 由浏览器或工具栏自动完成
我希望在JavaScript函数发生变化时调用它(使用当前输入值)。我希望它能马上被调用,而不是在输入失去焦点的时候。
我正在寻找最干净和最健壮的方法来跨所有浏览器(最好使用jQuery)。
<input type="text">的值可以通过多种方式改变,包括:
按键 复制/粘贴 JavaScript修改 由浏览器或工具栏自动完成
我希望在JavaScript函数发生变化时调用它(使用当前输入值)。我希望它能马上被调用,而不是在输入失去焦点的时候。
我正在寻找最干净和最健壮的方法来跨所有浏览器(最好使用jQuery)。
当前回答
实际上,我们不需要设置循环来检测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更改有完全控制的情况下才可用。
其他回答
实际上,我们不需要设置循环来检测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更改有完全控制的情况下才可用。
不幸的是,没有事件或事件集符合您的标准。按键和复制/粘贴都可以用keyup事件处理。通过JS进行更改比较棘手。如果你可以控制设置文本框的代码,你最好的选择是修改它,直接调用你的函数,或者在文本框上触发一个用户事件:
// Compare the textbox's current and last value. Report a change to the console.
function watchTextbox() {
var txtInput = $('#txtInput');
var lastValue = txtInput.data('lastValue');
var currentValue = txtInput.val();
if (lastValue != currentValue) {
console.log('Value changed from ' + lastValue + ' to ' + currentValue);
txtInput.data('lastValue', currentValue);
}
}
// Record the initial value of the textbox.
$('#txtInput').data('lastValue', $('#txtInput').val());
// Bind to the keypress and user-defined set event.
$('#txtInput').bind('keypress set', null, watchTextbox);
// Example of JS code triggering the user event
$('#btnSetText').click(function (ev) {
$('#txtInput').val('abc def').trigger('set');
});
如果你不能控制这段代码,你可以使用setInterval()来“监视”文本框的变化:
// Check the textbox every 100 milliseconds. This seems to be pretty responsive.
setInterval(watchTextbox, 100);
这种主动监控不会“立即”捕捉到更新,但它似乎足够快,没有可察觉的滞后。正如DrLouie在评论中指出的,如果你需要观察大量的输入,这个解决方案可能无法很好地扩展。您总是可以将第二个参数调整为setInterval()以更频繁或更少地检查。
您可以将'input'事件绑定到<input type="text">。这将在每次输入更改(如复制、粘贴、按键等)时触发。
$("#input-id").on("input", function(){
// Your action
})
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。
把这段代码添加到某个地方,就可以了。
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