我想检测文本框的内容何时发生变化。我可以使用 keyup 方法,但这也将检测不生成字母的击键,如箭头键。我想到了两种使用 keyup 事件执行此操作的方法:
- 显式检查按下键的ASCII码是否为字母\退格\删除
- 使用闭包来记住击键之前文本框中的文本是什么,并检查这是否已更改。
两者看起来都有些麻烦。
我想检测文本框的内容何时发生变化。我可以使用 keyup 方法,但这也将检测不生成字母的击键,如箭头键。我想到了两种使用 keyup 事件执行此操作的方法:
两者看起来都有些麻烦。
开始观察“输入”事件而不是“变化”。
jQuery('#some_text_box').on('input', function() {
// do your stuff
});
...这很好很干净,但可以进一步扩展到:
jQuery('#some_text_box').on('input propertychange paste', function() {
// do your stuff
});
在 HTML/标准 JavaScript 中使用 onchange 事件。
在 jQuery 中,这是change()事件。例如:
$('element').change(function() { // do something } );
编辑
在阅读了一些评论后,关于:
$(function() {
var content = $('#myContent').val();
$('#myContent').keyup(function() {
if ($('#myContent').val() != content) {
content = $('#myContent').val();
alert('Content has been changed');
}
});
});
'change' 事件不能正常工作,但 'input' 是完美的。
$('#your_textbox').bind('input', function() {
/* This will be fired every time, when textbox's value changes. */
} );
这个怎么样:
< jQuery 1.7
$("#input").bind("propertychange change keyup paste input", function(){
// do stuff;
});
> jQuery 1.7
$("#input").on("propertychange change keyup paste input", function(){
// do stuff;
});
这适用于 IE8/IE9、FF、Chrome
使用闭包来记住击键之前复选框中的文本是什么,并检查它是否已更改。
是的。您不一定必须使用闭包,但您需要记住旧值并将其与新值进行比较。
然而!这仍然不会捕捉到每一个变化,因为有一种编辑文本框内容的方法,不涉及任何按键。例如,选择一系列文本,然后右键单击剪切。或者拖动它。或者将文本从另一个应用程序拖放到文本框中。或者通过浏览器的拼写检查更改单词。或者...
因此,如果您必须检测每个更改,则必须对其进行轮询。您可以window.setInterval
每隔(例如)每秒检查该字段与其先前的值。你也可以电汇onkeyup
到同一个功能,使得变化是由按键引起的反映更快。
麻烦吗?是的。但就是这样,或者只是按照正常的 HTML onchange 方式进行操作,不要尝试即时更新。