ola*_*ndo 411 javascript jquery textbox keypress
我希望在文本框的内容发生变化时进行检测.我可以使用keyup方法,但这也会检测不生成字母的击键,如箭头键.我想到了使用keyup事件执行此操作的两种方法:
两者看起来都很麻烦.
小智 703
开始观察"输入"事件而不是"更改".
jQuery('#some_text_box').on('input', function() {
// do your stuff
});
...这很干净,但可以进一步扩展到:
jQuery('#some_text_box').on('input propertychange paste', function() {
// do your stuff
});
Wal*_*jad 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');
}
});
});
小智 44
"更改"事件无法正常工作,但"输入"是完美的.
$('#your_textbox').bind('input', function() {
/* This will be fired every time, when textbox's value changes. */
} );
Cat*_*ish 39
这个怎么样:
<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
bob*_*nce 21
使用闭包记住键击之前复选框中的文本是什么,并检查这是否已更改.
是的.您不必必须使用闭包,但您需要记住旧值并将其与新值进行比较.
然而!这仍然无法捕捉到每一个变化,因为有一种方法可以编辑不涉及任何按键的文本框内容.例如,选择一系列文本,然后右键单击剪切.或者拖动它.或者将文本从另一个应用程序中删除到文本框中.或者通过浏览器的拼写检查更改单词.要么...
因此,如果您必须检测每个更改,则必须轮询它.您可以window.setInterval每隔(比如)秒检查该字段与其先前的值.你也可以电汇onkeyup到同一个功能,使得变化是由按键引起的反映更快.
繁琐？是.但它就是或者只是按照正常的HTML onchange方式进行,不要尝试即时更新.
Nav*_*jan 13
$(document).on('input','#mytxtBox',function () {
console.log($('#mytxtBox').val());
});
您可以使用"input"事件来检测文本框中的内容更改.不要使用'live'来绑定事件,因为它在Jquery-1.7中已被弃用,因此请使用'on'.
我假设您正在寻找在文本框更改时执行某些操作(即通过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联系起来:
我建议看一下 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（或者在我的情况下开发自定义小部件），您可以使用小部件或将代码复制到您自己的小部件中。