подія onchange для типу введення = “число”

Як я можу обробити onchange <input type="number" id="n" value="5" step=".5" />? Я не можу зробити keyupабо keydown, тому що користувач може просто використовувати стрілки для зміни значення. Я хотів би обробляти це, коли воно змінюється, а не лише при розмитті, що, на мою думку, .change()відбувається. Будь-які ідеї?

Використовуйте мишу та клавіатуру

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

http://jsfiddle.net/XezmB/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>

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

Це трохи гетто, але таким чином ви можете використовувати подію "клацання", щоб зафіксувати подію, яка запускається, коли ви використовуєте мишу для збільшення / зменшення за допомогою маленьких стрілок на вході. Ви можете бачити, як я вбудував невелику ручну процедуру "перевірки змін", яка гарантує, що ваша логіка не спрацює, якщо значення насправді не змінилося (щоб запобігти помилковим спрацьовуванням від простих клацань на полі).

Щоб виявити натискання миші або клавіші, ви також можете написати:

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

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

Демонстрація: http://jsfiddle.net/X8cV3/

Оскільки $("input[type='number']")в IE не працює, нам слід використовувати назву класу або ідентифікатор, наприклад,$('.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>

Можливо, є краще рішення, але ось що прийшло в голову:

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

Ось робочий приклад .

Він просто пов'язує обробник події до keyup, changeі clickподії. Він перевіряє, чи не змінилося значення, і якщо так, зберігає поточне значення, щоб він міг перевірити знову наступного разу. Чек необхідний для розгляду clickподії.

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

АБО

$("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/

Я використовував прихований тип введення, щоб бути контейнером попереднього значення, яке буде потрібно для порівняння при наступній зміні.

У мене була та ж проблема, і я вирішив за допомогою цього коду

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/