javascript - 如何监听输入类型 ="number"的升压​​事件

Question

我希望能够收听<input type="number" />使用 jQuery 提升(增量)和降低事件。 (目前只能理解如何监听change事件)

Answer 1

对于 input type="number"，您可以使用 change 事件，但可能会有更多情况需要处理并造成一些困惑。我把它分解了，我建议使用“mouseup”事件来实现增量功能(主要用于 pc)但是如果用户使用设备，我会使用事件“keyup”，因为增量功能不会出现并且用户将有一个屏幕键盘。更改事件将监听两者。

例如:

$(".counter").bind('mouseup', function () { 

    if($(this).val() == undefined || $(this).val() == "")
            return; /* Exit dont bother with handling this later, if its not needed leave. */

    /* Important Check against integers and not strings. */
    /* Comparing against arrays will give unexecpted behavior, size is different then the value. */         
    var newVal = parseInt($(this).val());
    var oldVal = parseInt($(this).data('old-value'));

    if (oldVal < newVal) {      
        alert('incrementing');
    }
    else{

        alert('decrementing'); 
    }

    $(this).data('old-value', $(this).val());

});

$(".counter").bind('keyup', function () { 
    /* Similar logic */
});

我使用“bind”而不是“on”或 by 方法“change”，因为“on”是 bind 的简写。

JSFiddle Demo