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

<select>有这个API。那<input>呢

您可以使用 .change()

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

但是，此事件仅在选择器失去焦点时才会触发，因此您需要单击其他位置才能进行此工作。

如果这不太适合您，则可以使用其他一些jQuery事件，例如keyup，keydown或keypress-取决于您想要的确切效果。

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

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

（请参阅文档。）

这是如此有用，值得回答。当前（v1.8 *？）在jquery中没有.input（）便利fn，所以做到这一点的方法是

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

我建议使用keyup事件，如下所示：

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

有几种方法可以达到相同的结果，所以我想这取决于偏好，取决于您希望它如何精确地工作。

更新：仅适用于手动输入，不适用于复制和粘贴。

对于复制和粘贴，我建议以下内容：

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

这是我使用的代码：

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

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

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

这非常有效，尤其是与jqGrid控件配对时。您只需在文本框中输入内容，即可立即在中查看结果jqGrid。

有一个且只有一个可靠的方式做到这一点，它是通过在间隔拉的价值，并将其与一个缓存值。

之所以是唯一方法，是因为有多种方法可以使用各种输入（键盘，鼠标，粘贴，浏览器历史记录，语音输入等）来更改输入字段，并且您永远无法使用交叉事件中的标准事件来检测所有这些输入字段浏览器环境。

幸运的是，由于有了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。

<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');
});

HTML，

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

我希望这段工作代码将对尝试动态访问/ Ajax调用的人有所帮助...

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

您可以简单地使用id

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

您可以通过不同的方式来执行此操作，keyup是其中之一。但是我在下面给出改变的例子。

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

注意：input [name =“ vat_id”]替换为您的输入ID或名称。

如果要在键入时触发事件，请使用以下命令：

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

如果要在离开输入字段时触发事件，请使用以下命令：

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

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

这对我有用。如果单击名称为fieldA的字段或输入任何键，则会更新ID为fieldB的字段。

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

您可以使用.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.");
});

我完全同意安迪的观点。一切都取决于您希望它如何工作。