9

我有一个数字输入，应该在每次更改时触发 jQuery。为此，我做了一个$('#id').bind('keyup change', ...);，它会在任何按键或鼠标控制器更改时触发。

这适用于鼠标点击（触发器change）和输入数字（触发器keyup）。但是对于光标键，它会同时触发change和keyup。我怎样才能让它在所有情况下只触发一次？

这是一个显示问题的示例：http: //jsfiddle.net/jSjkE/

4

3 回答 3

16

你对onchange事件有错误的概念。

它不会在元素的值更改时触发，而是仅在满足 2 个条件时触发：

  • 元素模糊（失去焦点）；
  • 该元素具有与获得焦点时不同的值。

注意：以上是针对类型的输入text。对于类型checkbox/radio它会在其checked属性更改时立即触发，对于select元素则在其选定选项更改时立即触发。

当您按下 Chrome 的向上/向下箭头时，该onchange事件（可能是错误的）会触发。input type="number"您不应该依赖它，因为许多其他主要浏览器甚至还没有实现数字输入，并且可能不会遵循这种行为。

相反，当您使用 HTML5 时，您应该依赖oninputHTML5 事件，该事件会在元素的值更新时触发。

$(function() {
    var count = 0;
    $('#num').on('input', function(e) {
        console.log('update ' + (++count) + ' Value: ' + this.value);    
    });
});​

小提琴

编辑：

对于较旧的（和非 HTML5）浏览器，您可以使用该keyup事件作为后备：

$('#num').on('input keyup', function(e) {

对非 HTML5 浏览器执行此操作的最有弹性的方法是setInterval不断检查元素的值是否已更改，因为keyup如果您选择一些文本并将其拖到文本框中，则不会触发 - 您可以尝试.on('input keyup mouseup'，但它不会t 如果用户使用浏览器的编辑 > 粘贴菜单触发。

编辑2：

如果您不想使用setInterval，可以在.on/中放置一个巨大的事件映射，.bind并通过将当前值存储在.data()元素中来检查值是否已更改：

var count = 0;
$('#num').on('input keyup change', function(e) {
    if (this.value == $(this).data('curr_val'))
        return false;
    $(this).data('curr_val', this.value);

    console.log('update ' + (++count) + ' Value: ' + this.value);
});

小提琴

我已将onchange事件添加到事件映射中，因此即使oninputandonkeyup失败（非 html5 浏览器使用浏览器的菜单粘贴数据），onchange当元素失去焦点时事件仍会触发。

这是带有注释setInterval并.data()避免使用全局变量的最终编辑，因此您可以选择要使用的后备选项：

$(function() {
    var $num = $('#num');
    $num.data('curr_val', $num.val()); //sets initial value

    var count = 0;
    setInterval(function(){
        if ($num.data('curr_val') == $num.val()) //if it still has same value
            return false; //returns false
        $num.data('curr_val', $num.val()); //if val is !=, updates it and
        //do your stuff
        console.log('update ' + (++count) + ' Value: ' + $num.val());
    }, 100); //100 = interval in miliseconds
});

小提琴

于 2012-06-30T18:17:45.017 回答
0 
$('input').unbind('keyup').bind('keyup',function(e){ ...
于 2016-03-15T22:20:32.827 回答
0

Keyup 始终适用于输入、搜索字段，并且您可以防止更改事件如下：并保持更改事件对其他控件有效，即选择。

// Prevent trigger change as keyup event already triggered so no twice call
if ((e.target.type == 'input' || e.target.type == 'search') && e.type == 'change') {
    return;
}
于 2021-01-25T07:58:07.590 回答