Question

如何处理<input type="number" id="n" value="5" step=".5" />的onchange？我无法执行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＆lt; 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

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

mytable(group, id)

Answer 5

$(':input').bind('click keyup', function(){
    // do stuff
});

演示：http://jsfiddle.net/X8cV3/

Answer 6

由于$("input[type='number']")不适用于IE，我们应该使用类名或ID，例如$('.input_quantity')。

不要使用.bind()方法。 .on()方法是将事件处理程序附加到文档的首选方法。

所以，我的版本是：

HTML 的

<input type="number" value="5" step=".5" min="1" max="999" id="txt_quantity" name="txt_quantity" class="input_quantity">

的jQuery

<script>
$(document).ready(function(){
    $('.input_quantity').on('change keyup', function() {
        console.log('nice');
    }); 
});
</script>

Answer 7

可能有更好的解决方案，但这是我想到的：

var value = $("#yourInput").val();
$("#yourInput").on('keyup change click', function () {
    if(this.value !== value) {
        value = this.value;
        //Do stuff
    }        
});

这是working example。

它只是将事件处理程序绑定到keyup，change和click事件。它检查值是否已更改，如果是，则存储当前值，以便下次再次检查。需要进行检查才能处理click事件。

Answer 8

$("input[type='number']").bind("focus", function() {
    var value = $(this).val();
    $(this).bind("blur", function() {
        if(value != $(this).val()) {
            alert("Value changed");
        }
        $(this).unbind("blur");
    });
});

OR

$("input[type='number']").bind("input", function() {
    alert("Value changed");
});

Answer 9

<input type="number" id="n" value="0" step=".5" />
<input type="hidden" id="v" value = "0"/>

<script>
$("#n").bind('keyup mouseup', function () {
    var current = $("#n").val();
    var prevData = $("#v").val(); 
    if(current > prevData || current < prevData){
       $("#v").val(current);
       var newv = $("#v").val(); 
       alert(newv);
    } 
});  
</script>

http://jsfiddle.net/patrickrobles53/s10wLjL3/

我使用隐藏的输入类型作为前一个的容器   下次更改时进行比较所需的值。

Answer 10

我有同样的问题，我解决了使用此代码

HTML

<span id="current"></span><br>
<input type="number" id="n" value="5" step=".5" />

您只能添加3行，其他部分是可选的。

$('#n').on('change paste', function () {
    $("#current").html($(this).val())   
});
// here when click on spinner to change value, call trigger change
$(".input-group-btn-vertical").click(function () {
   $("#n").trigger("change");
});
// you can use this to block characters non numeric
$("#n").keydown(function (e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || (e.keyCode === 65 && e.ctrlKey === true) || (e.keyCode >= 35 && e.keyCode <= 40)) 
           return;

    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) 
       e.preventDefault();
});

此处示例：http://jsfiddle.net/XezmB/1303/

Answer 11

只需用纯 JavaScript 编写一个函数并在 HTML 代码中调用它：

<input type="number" onchange="onChangeFunction(this.value)">

输入类型=“数字”的onchange事件

11 个答案: