evento onchange per tipo di input = "numero"

Come posso gestire una modifica per <input type="number" id="n" value="5" step=".5" />? Non posso fare un keyupo keydown, perché l'utente può semplicemente usare le frecce per modificare il valore. Vorrei gestirlo ogni volta che cambia, non solo sulla sfocatura, cosa che penso .change()faccia l' evento. Qualche idea?

Usa mouseup e keyup

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

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

L' oninputevento ( .bind('input', fn)) copre qualsiasi modifica dalle sequenze di tasti ai clic delle frecce e all'incolla da tastiera / mouse, ma non è supportato in 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());
});​

Questo è un po 'ghetto, ma in questo modo puoi usare l'evento "click" per catturare l'evento che viene eseguito quando usi il mouse per aumentare / diminuire tramite le piccole frecce sull'ingresso. Puoi vedere come ho costruito una piccola routine manuale di "controllo delle modifiche" che assicura che la tua logica non si attivi a meno che il valore non sia effettivamente cambiato (per evitare falsi positivi da semplici clic sul campo).

Per rilevare quando il mouse o il tasto vengono premuti, puoi anche scrivere:

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

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

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

Perché $("input[type='number']")non funziona su IE, dovremmo usare un nome di classe o ID, ad esempio, $('.input_quantity').

E non usare il .bind()metodo. Il .on()metodo è il metodo preferito per allegare gestori di eventi a un documento.

Quindi, la mia versione è:

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>

Potrebbe esserci una soluzione migliore, ma questo è ciò che mi è venuto in mente:

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

Ecco un esempio funzionante .

Associa semplicemente un gestore di eventi agli eventi keyup, changee click. Controlla se il valore è cambiato o meno e, in tal caso, memorizza il valore corrente in modo che possa ricontrollare la prossima volta. L'assegno è necessario per far fronte clickall'evento.

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

O

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

Ho utilizzato un tipo di input nascosto per essere il contenitore del valore precedente che sarà necessario per il confronto alla modifica successiva.

Ho avuto lo stesso problema e l'ho risolto usando questo codice

HTML

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

Puoi aggiungere solo 3 prime righe, le altre parti sono opzionali.

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

Esempio qui: http://jsfiddle.net/XezmB/1303/