输入类型="数字"的onchange事件

Question

我怎样才能处理onchange <input type="number" id="n" value="5" step=".5" />？我不能做keyup或者keydown,因为用户可能只是使用箭头来改变值.我想在它改变的时候处理它,而不仅仅是模糊,我认为.change()事件就是这样.有任何想法吗？

Answer 1

使用mouseup和keyup

$(":input").bind('keyup mouseup', function () {
    alert("changed");            
});

http://jsfiddle.net/XezmB/2/

Answer 2

的oninput事件(.bind('input', fn))覆盖从击键任何改变箭头点击和键盘/鼠标粘贴,但在IE <9不被支持.

jQuery(function($) {
  $('#mirror').text($('#alice').val());

  $('#alice').on('input', function() {
    $('#mirror').text($('#alice').val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="alice" type="number" step="any" value="99">

<p id="mirror"></p>

Answer 3

http://jsfiddle.net/XezmB/8/

$(":input").bind('keyup change click', function (e) {
    if (! $(this).data("previousValue") || 
           $(this).data("previousValue") != $(this).val()
       )
   {
        console.log("changed");           
        $(this).data("previousValue", $(this).val());
   }

});


$(":input").each(function () {
    $(this).data("previousValue", $(this).val());
});?

这有点贫民窟,但是这样你可以使用"click"事件捕获当你使用鼠标通过输入上的小箭头递增/递减时运行的事件.您可以看到我是如何在一个小的手动"更改检查"例程中构建的,该例程确保您的逻辑不会触发,除非实际更改了值(以防止对字段的简单点击产生误报).

Answer 4

要检测何时按下鼠标或键，您还可以编写：

$(document).on('keyup mouseup', '#your-id', function() {                                                                                                                     
  console.log('changed');
});