我想检测文本框的内容何时发生变化。我可以使用 keyup 方法，但这也会检测不生成字母的击键，比如箭头键。我想到了两种使用 keyup 事件的方法：
- 明确检查按下的键的ASCII码是否是字母\退格\删除
- 使用闭包来记住击键之前文本框中的文本是什么，并检查它是否已经改变。
两者看起来都有些麻烦。
问问题
542938 次
15 回答
747
开始观察“输入”事件而不是“改变”。
jQuery('#some_text_box').on('input', function() {
// do your stuff
});
...这很好，很干净，但可以进一步扩展到：
jQuery('#some_text_box').on('input propertychange paste', function() {
// do your stuff
});
于 2012-03-31T12:09:20.473 回答
68
在 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');
}
});
});
于 2009-09-26T12:56:50.167 回答
48
“更改”事件无法正常工作，但“输入”是完美的。
$('#your_textbox').bind('input', function() {
/* This will be fired every time, when textbox's value changes. */
} );
于 2012-06-03T09:33:53.463 回答
44
这个怎么样：
< 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
于 2013-03-21T21:07:24.280 回答
21
使用闭包记住击键前复选框中的文本是什么，并检查它是否已更改。
是的。您不必必须使用闭包，但您需要记住旧值并将其与新值进行比较。
然而！这仍然不会捕获所有更改，因为有一种编辑文本框内容的方法不涉及任何按键。例如选择文本范围然后右键单击剪切。或者拖动它。或将其他应用程序中的文本放入文本框中。或通过浏览器的拼写检查更改单词。或者...
所以如果你必须检测每一个变化，你必须轮询它。您可以window.setInterval每隔（例如）秒检查该字段与之前的值。您还可以onkeyup连接到相同的功能，以便更快地反映由按键引起的更改。
麻烦？是的。但就是这样，或者只是按照正常的 HTML onchange 方式进行操作，不要尝试即时更新。
于 2009-09-26T13:32:41.953 回答
14
$(document).on('input','#mytxtBox',function () {
console.log($('#mytxtBox').val());
});
您可以使用“输入”事件来检测文本框中的内容更改。不要使用 'live' 来绑定事件，因为它在 Jquery-1.7 中已被弃用，因此请使用 'on'。
于 2013-02-27T12:18:00.087 回答
5
我假设您希望在文本框更改时进行交互（即通过 ajax 检索一些数据）。我一直在寻找同样的功能。我知道使用全局不是最强大或最优雅的解决方案，但这就是我所采用的。这是一个例子：
var searchValue = $('#Search').val();
$(function () {
setTimeout(checkSearchChanged, 0.1);
});
function checkSearchChanged() {
var currentValue = $('#Search').val();
if ((currentValue) && currentValue != searchValue && currentValue != '') {
searchValue = $('#Search').val();
$('#submit').click();
}
else {
setTimeout(checkSearchChanged, 0.1);
}
}
这里要注意的一件事是我使用的是 setTimeout 而不是 setInterval，因为我不想同时发送多个请求。这确保了在提交表单时计时器“停止”并在请求完成时“启动”。我通过在我的 ajax 调用完成时调用 checkSearchChanged 来做到这一点。显然，您可以扩展它以检查最小长度等。
在我的例子中，我使用的是 ASP.Net MVC，所以你可以在下面的文章中看到如何将它与 MVC Ajax 联系起来：
于 2010-12-21T16:45:06.913 回答
4
我建议看一下 jQuery UI 自动完成小部件。他们在那里处理了大部分案例，因为他们的代码库比那里的大多数案例更成熟。
下面是演示页面的链接，您可以验证它是否有效。http://jqueryui.com/demos/autocomplete/#default
您将从阅读源代码并了解他们如何解决它中获得最大的好处。你可以在这里找到它：https ://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js 。
基本上他们什么都做，他们绑定到input, keydown, keyup, keypress, focus and blur. 然后他们对各种键进行特殊处理，例如page up, page down, up arrow key and down arrow key. 在获取文本框的内容之前使用计时器。当用户键入与命令不对应的键（向上键、向下键等）时，会有一个计时器在大约 300 毫秒后探索内容。在代码中看起来像这样：
// switch statement in the
switch( event.keyCode ) {
//...
case keyCode.ENTER:
case keyCode.NUMPAD_ENTER:
// when menu is open and has focus
if ( this.menu.active ) {
// #6055 - Opera still allows the keypress to occur
// which causes forms to submit
suppressKeyPress = true;
event.preventDefault();
this.menu.select( event );
}
break;
default:
suppressKeyPressRepeat = true;
// search timeout should be triggered before the input value is changed
this._searchTimeout( event );
break;
}
// ...
// ...
_searchTimeout: function( event ) {
clearTimeout( this.searching );
this.searching = this._delay(function() { // * essentially a warpper for a setTimeout call *
// only search if the value has changed
if ( this.term !== this._value() ) { // * _value is a wrapper to get the value *
this.selectedItem = null;
this.search( null, event );
}
}, this.options.delay );
},
使用计时器的原因是为了让 UI 有机会更新。当 Javascript 运行时，UI 无法更新，因此调用了延迟函数。这适用于其他情况，例如将注意力集中在文本框（由该代码使用）。
因此，如果您不使用 jQuery UI（或者在我的情况下开发自定义小部件），您可以使用小部件或将代码复制到您自己的小部件中。
于 2012-05-15T04:25:26.113 回答
2
您是否考虑使用更改事件？
$("#myTextBox").change(function() { alert("content changed"); });
于 2009-09-26T12:57:53.067 回答
2
我想问一下您为什么要尝试检测文本框的内容何时实时更改？
另一种方法是设置一个计时器（通过 setIntval？）并将上次保存的值与当前值进行比较，然后重置一个计时器。这将保证捕获任何更改，无论是由键、鼠标、您没有考虑的其他输入设备，甚至是 JavaScript 从应用程序的不同部分更改值（另一种没有人提到的可能性）引起的。
于 2009-09-26T13:38:43.173 回答
1
通过自定义的 jQuery shim 使用textchange事件以实现跨浏览器input兼容性。http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html（最近分叉的github：https ://github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )
这会处理所有输入标签，包括<textarea>content</textarea>，这并不总是与change keyup等一起使用。（！）只有 jQuery始终如一on("input propertychange")地处理<textarea>标签，上面是所有不理解input事件的浏览器的填充程序。
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/pandell/jquery-splendid-textchange/master/jquery.splendid.textchange.js"></script>
<meta charset=utf-8 />
<title>splendid textchange test</title>
<script> // this is all you have to do. using splendid.textchange.js
$('textarea').on("textchange",function(){
yourFunctionHere($(this).val()); });
</script>
</head>
<body>
<textarea style="height:3em;width:90%"></textarea>
</body>
</html>
JS Bin 测试
这也可以处理粘贴、删除，并且不会在 keyup 上重复工作。
如果不使用 shim，请使用 jQueryon("input propertychange")事件。
// works with most recent browsers (use this if not using src="...splendid.textchange.js")
$('textarea').on("input propertychange",function(){
yourFunctionHere($(this).val());
});
于 2016-09-01T23:31:46.990 回答
0
这里有一个完整的工作示例。
<html>
<title>jQuery Summing</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
$(document).ready(function() {
$('.calc').on('input', function() {
var t1 = document.getElementById('txt1');
var t2 = document.getElementById('txt2');
var tot=0;
if (parseInt(t1.value))
tot += parseInt(t1.value);
if (parseInt(t2.value))
tot += parseInt(t2.value);
document.getElementById('txt3').value = tot;
});
});
</script>
</head>
<body>
<input type='text' class='calc' id='txt1'>
<input type='text' class='calc' id='txt2'>
<input type='text' id='txt3' readonly>
</body>
</html>
于 2014-11-30T12:00:34.727 回答
0
像这样的东西应该可以工作，主要是因为focus并且focusout最终会得到两个单独的值。我在data这里使用它是因为它在元素中存储值但不接触 DOM。这也是一种存储与其元素相关的值的简单方法。您可以轻松地使用更高范围的变量。
var changed = false;
$('textbox').on('focus', function(e) {
$(this).data('current-val', $(this).text();
});
$('textbox').on('focusout', function(e) {
if ($(this).data('current-val') != $(this).text())
changed = true;
}
console.log('Changed Result', changed);
}
于 2017-02-17T21:27:59.997 回答
0
此代码检测文本框的内容何时由用户更改并由 Javascript 代码修改。
var $myText = jQuery("#textbox");
$myText.data("value", $myText.val());
setInterval(function() {
var data = $myText.data("value"),
val = $myText.val();
if (data !== val) {
console.log("changed");
$myText.data("value", val);
}
}, 100);
于 2019-11-06T12:14:34.257 回答
0
document.getElementById('txtrate' + rowCount).onchange = function () {
// your logic
};
这个工作正常，但也触发了点击事件，这不好。我的系统进入了循环。尽管
$('#txtrate'+rowCount).bind('input', function() {
//your logic
} );
在我的场景中完美运行。它仅在值更改时才有效。也可以使用 document.getElementById 而不是 $ 符号
于 2020-07-28T11:01:00.947 回答