sự kiện thay đổi cho loại đầu vào = “số”

Làm cách nào để xử lý một sự thay đổi <input type="number" id="n" value="5" step=".5" />? Tôi không thể thực hiện keyuphoặc keydown, bởi vì, người dùng có thể chỉ sử dụng các mũi tên để thay đổi giá trị. Tôi muốn xử lý nó bất cứ khi nào nó thay đổi, không chỉ là mờ, điều mà tôi nghĩ rằng .change()sự kiện làm được. Có ý kiến ​​gì không?

Sử dụng mouseup và keyup

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

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

Sự oninputkiện ( .bind('input', fn)) bao gồm mọi thay đổi từ thao tác nhấn phím đến nhấp chuột vào mũi tên và dán bàn phím / chuột, nhưng không được hỗ trợ trong 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>

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());
});​

Đây là một khu ổ chuột nhỏ, nhưng bằng cách này bạn có thể sử dụng sự kiện "nhấp chuột" để nắm bắt sự kiện chạy khi bạn sử dụng chuột để tăng / giảm thông qua các mũi tên nhỏ trên đầu vào. Bạn có thể thấy cách tôi đã xây dựng quy trình "kiểm tra thay đổi" thủ công nhỏ để đảm bảo logic của bạn sẽ không kích hoạt trừ khi giá trị thực sự thay đổi (để ngăn dương tính giả từ các nhấp chuột đơn giản trên trường).

Để phát hiện khi chuột hoặc phím được nhấn, bạn cũng có thể viết:

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

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

Demo: http://jsfiddle.net/X8cV3/

Vì $("input[type='number']")không hoạt động trên IE, chúng ta nên sử dụng tên lớp hoặc id chẳng hạn $('.input_quantity').

Và không sử dụng .bind()phương pháp. Các .on()phương pháp là phương pháp ưa thích để gắn xử lý sự kiện cho một tài liệu.

Vì vậy, phiên bản của tôi là:

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>

Có thể có một giải pháp tốt hơn, nhưng đây là những gì tôi nghĩ đến:

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

Đây là một ví dụ hoạt động .

Nó chỉ đơn giản liên kết với phương thức thụ lý sự kiện vào keyup, changevà clickcác sự kiện. Nó kiểm tra xem giá trị đã thay đổi hay chưa và nếu có, nó sẽ lưu trữ giá trị hiện tại để nó có thể kiểm tra lại vào lần sau. Kiểm tra là cần thiết để đối phó với clicksự kiện.

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

HOẶC LÀ

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

<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/

Tôi đã sử dụng một loại đầu vào ẩn để làm vùng chứa giá trị trước đó sẽ cần thiết để so sánh trong lần thay đổi tiếp theo.

Tôi đã gặp vấn đề tương tự và tôi đã giải quyết bằng cách sử dụng mã này

HTML

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

Bạn chỉ có thể thêm 3 dòng đầu tiên, các phần khác là tùy chọn.

$('#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();
});

Ví dụ ở đây: http://jsfiddle.net/XezmB/1303/