如何使用 jQuery 实现 < input type = “ text”> 的更改？

你可以使用.change()

$('input[name=myInput]').change(function() { ... });

但是，此事件仅在选择器失去焦点时才会触发，因此您需要单击其他地方以使其工作。

如果这不是很适合你，你可以使用一些其他的jQuery的事件，如按键弹起， keydown或键盘按键 -这取决于你想要的确切效果。

$("input").change(function () {
alert("Changed!");
});

我建议像下面这样使用keyup事件:

$('elementName').keyup(function() {
alert("Key up detected");
});

有几种方法可以达到同样的效果，所以我想这取决于你的偏好，取决于你希望它如何工作。

更新:这只适用于手动输入，不复制和粘贴。

对于复制和粘贴，我推荐以下方法:

$('elementName').on('input',function(e){
// Code here
});

你可以使用.keypress()。

例如，考虑HTML:

<form>
<fieldset>
<input id="target" type="text" value="Hello there" />
</fieldset>
</form>
<div id="other">
Trigger the handler
</div>

事件处理程序可以绑定到输入字段:

$("#target").keypress(function() {
alert("Handler for .keypress() called.");
});

我完全同意安迪的观点;一切都取决于你想要它如何工作。

$("input").keyup(function () {
alert("Changed!");
});

正如@pimvdb在他的评论中所说，

注意，只有当输入元素失去焦点时才会触发更改。 还有一个输入事件，它在文本框更新时触发 而不需要失去焦点。与关键事件不同，它也适用于 粘贴/拖动文本。< / p >

(参见文档)。

这是非常有用的，值得把它写进答案里。目前(v1.8*?)在jquery中没有.input()方便fn，所以这样做的方法是

$('input.myTextInput').on('input',function(e){
alert('Changed!')
});

有只有一种可靠的方法，它是通过在间隔中提取值并将其与缓存值进行比较。

这是唯一的方法，因为有多种方法可以使用各种输入(键盘、鼠标、粘贴、浏览器历史记录、语音输入等)来更改输入字段，而在跨浏览器环境中使用标准事件永远无法检测到所有这些输入字段。

幸运的是，由于jQuery中的事件基础设施，添加自己的inputchange事件非常容易。我在这里这样做了:

$.event.special.inputchange = {
setup: function() {
var self = this, val;
$.data(this, 'timer', window.setInterval(function() {
val = self.value;
if ( $.data( self, 'cache') != val ) {
$.data( self, 'cache', val );
$( self ).trigger( 'inputchange' );
}
}, 20));
},
teardown: function() {
window.clearInterval( $.data(this, 'timer') );
},
add: function() {
$.data(this, 'cache', this.value);
}
};

像这样使用它:$('input').on('inputchange', function() { console.log(this.value) });

这里有一个演示:http://jsfiddle.net/LGAWY/

如果你害怕多个间隔，你可以在focus/blur上绑定/取消绑定此事件。

下面是我使用的代码:

$("#tbSearch").on('change keyup paste', function () {
ApplyFilter();
});


function ApplyFilter() {
var searchString = $("#tbSearch").val();
//  ... etc...
}


<input type="text" id="tbSearch" name="tbSearch" />

这工作得非常好，特别是当与jqGrid控件配对时。你可以在文本框中输入立即，然后在你的jqGrid中查看结果。

<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" />


$(".firstName").on('change keyup paste', function () {
var element = $(this);
console.log(element);
var dataAttribute = $(element).attr("data-someattr");
console.log("someattr: " + dataAttribute );
});

我建议使用this关键字来访问整个元素，这样你就可以对这个元素做任何你需要的事情。

即使是动态/Ajax调用，以下方法也可以工作。

脚本:

jQuery('body').on('keyup','input.addressCls',function(){
console.log('working');
});

超文本标记语言

<input class="addressCls" type="text" name="address" value="" required/>

我希望这段工作代码将帮助那些试图访问动态/Ajax调用的人…

您可以简单地使用id

$("#your_id").on("change",function() {
alert(this.value);
});

这对我很管用。如果单击名称为基坑的字段或输入任何键，它将更新id为fieldB的字段。

jQuery("input[name='fieldA']").on("input", function() {
jQuery('#fieldB').val(jQuery(this).val());
});

你可以用不同的方式来做到这一点，按键弹起就是其中之一。但是我在下面举个例子。

$('input[name="vat_id"]').on('change', function() {
if($(this).val().length == 0) {
alert('Input field is empty');
}
});

注意:输入(name = " vat_id ")替换为您的输入ID或的名字。

如果你想触发事件当你打字的时候，使用以下方法:

$('input[name=myInput]').on('keyup', function() { ... });

如果你想在保留输入字段上触发事件，使用以下方法:

$('input[name=myInput]').on('change', function() { ... });