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

Question

<select>有这个API.怎么样<input>？

Answer 1

正如@pimvdb在评论中所说,

请注意,只有在输入元素失去焦点时才会触发更改.每当文本框更新时都会触发输入事件,而不需要失去焦点.与键事件不同,它也适用于粘贴/拖动文本.

(见文件.)

这非常有用,值得回答.目前(v1.8*？)在jquery中没有.input()方便fn,所以这样做的方法是

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

Answer 2

您可以使用 .change()

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

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

如果这不适合你,你可以使用其他一些jQuery事件,如keyup,keydown或keypress - 取决于你想要的确切效果.

Answer 3

我建议使用如下的keyup事件:

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

有几种方法可以达到相同的结果,所以我想这取决于偏好,取决于你希望它如何正常工作.

更新:这仅适用于手动输入而不是复制和粘贴.

对于复制和粘贴,我建议如下:

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

Answer 4

这是我使用的代码:

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

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

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

这很好用,特别是当与jqGrid控件配对时.您只需键入文本框即可立即查看结果jqGrid.

Answer 5

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

这是唯一的方法是因为有多种方法可以使用各种输入(键盘,鼠标,粘贴,浏览器历史记录,语音输入等)更改输入字段,并且您永远无法使用十字中的标准事件检测所有输入字段 - 浏览者环境.

幸运的是,由于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.

Answer 6

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

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

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

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

Answer 7

<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关键字来访问整个元素,这样您就可以使用此元素完成所需的一切.

Answer 8

即使是动态/Ajax 调用，以下内容也将起作用。

脚本：

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

网址，

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

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