我想检测文本框的内容何时发生了变化。我可以使用keyup方法,但这也将检测不生成字母的击键,如方向键。我想到了两种使用keyup事件的方法:
显式检查所按键的ascii码是否为字母\backspace\delete 使用闭包来记住在击键之前文本框中的文本是什么,并检查这是否已更改。
两者看起来都有点麻烦。
我想检测文本框的内容何时发生了变化。我可以使用keyup方法,但这也将检测不生成字母的击键,如方向键。我想到了两种使用keyup事件的方法:
显式检查所按键的ascii码是否为字母\backspace\delete 使用闭包来记住在击键之前文本框中的文本是什么,并检查这是否已更改。
两者看起来都有点麻烦。
当前回答
document.getElementById('txtrate' + rowCount).onchange = function () {
// your logic
};
这个工作得很好,但在点击时也会触发事件,这并不好。我的系统进入循环。 而
$('#txtrate'+rowCount).bind('input', function() {
//your logic
} );
在我的场景中非常适用。它只在值改变时起作用。 可以使用document代替$ sign。getElementById太
其他回答
我建议看看jQuery UI自动完成小部件。他们在那里处理了大多数情况,因为他们的代码基础比大多数人更成熟。
下面是一个演示页面的链接,您可以验证它的工作。http://jqueryui.com/demos/autocomplete/#default
阅读源代码,看看他们是如何解决问题的,你会得到最大的好处。你可以在这里找到它:https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js。
基本上它们都做了,它们绑定到输入,键下,键上,键按,聚焦和模糊。然后它们对各种键都有特殊的处理,比如向上翻页,向下翻页,向上箭头键和向下箭头键。在获取文本框的内容之前使用计时器。当用户输入一个与命令不对应的键(上键、下键等)时,会有一个计时器在大约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不能被更新,因此需要调用delay函数。这适用于其他情况,如保持对文本框(由该代码使用)的关注。
因此,如果不使用jQuery UI(或者像我这样开发自定义小部件),可以使用小部件,也可以将代码复制到自己的小部件中。
我假设当文本框发生变化时,您希望做一些交互式的事情(即通过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结合在一起,以及在下面的帖子中:
http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx
$(document).on('input','#mytxtBox',function () {
console.log($('#mytxtBox').val());
});
您可以使用'input'事件来检测文本框中的内容更改。不要使用'live'来绑定事件,因为它在Jquery-1.7中已弃用,所以要使用'on'。
这个怎么样:
< 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
document.getElementById('txtrate' + rowCount).onchange = function () {
// your logic
};
这个工作得很好,但在点击时也会触发事件,这并不好。我的系统进入循环。 而
$('#txtrate'+rowCount).bind('input', function() {
//your logic
} );
在我的场景中非常适用。它只在值改变时起作用。 可以使用document代替$ sign。getElementById太