событие onchange для типа ввода = «число»

Как я могу справиться с заменой <input type="number" id="n" value="5" step=".5" />? Я не могу сделать keyupили keydown, потому что пользователь может просто использовать стрелки для изменения значения. Я бы хотел обрабатывать его всякий раз, когда он изменяется, а не только при размытии, как я думаю, .change()событие. Есть идеи?

Используйте mouseup и keyup

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