onchange-Ereignis für Eingabetyp = "Nummer"

Wie kann ich mit einem Wechsel umgehen <input type="number" id="n" value="5" step=".5" />? Ich kann kein keyupoder tun keydown, weil der Benutzer möglicherweise nur die Pfeile verwendet, um den Wert zu ändern. Ich würde damit umgehen wollen, wenn es sich ändert, nicht nur bei Unschärfe, was meiner Meinung nach das .change()Ereignis tut. Irgendwelche Ideen?

Verwenden Sie Mouseup und Keyup

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

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

Das oninputEreignis ( .bind('input', fn)) deckt alle Änderungen von Tastenanschlägen zu Pfeilklicks und Einfügen von Tastatur / Maus ab, wird jedoch in IE <9 nicht unterstützt.

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

Dies ist ein bisschen Ghetto, aber auf diese Weise können Sie das "Klick" -Ereignis verwenden, um das Ereignis zu erfassen, das ausgeführt wird, wenn Sie mit der Maus über die kleinen Pfeile auf der Eingabe inkrementieren / dekrementieren. Sie können sehen, wie ich eine kleine manuelle Routine "Änderungsprüfung" eingebaut habe, die sicherstellt, dass Ihre Logik nur ausgelöst wird, wenn sich der Wert tatsächlich geändert hat (um zu verhindern, dass durch einfaches Klicken auf das Feld falsch positive Ergebnisse erzielt werden).

Um festzustellen, wann Maus oder Taste gedrückt werden, können Sie auch schreiben:

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

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

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

Da $("input[type='number']")dies im IE nicht funktioniert, sollten wir beispielsweise einen Klassennamen oder eine ID verwenden $('.input_quantity').

Und benutze keine .bind()Methode. Die .on()Methode ist die bevorzugte Methode zum Anhängen von Ereignishandlern an ein Dokument.

Meine Version lautet also:

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>

Es mag eine bessere Lösung geben, aber Folgendes kam mir in den Sinn:

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

Hier ist ein Arbeitsbeispiel .

Es bindet nur einen Event - Handler an die keyup, changeund clickVeranstaltungen. Es prüft, ob sich der Wert geändert hat oder nicht, und speichert in diesem Fall den aktuellen Wert, damit er beim nächsten Mal erneut prüfen kann. Die Prüfung ist erforderlich, um das clickEreignis zu behandeln .

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

ODER

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

Ich habe einen versteckten Eingabetyp als Container des vorherigen Werts verwendet, der für den Vergleich bei der nächsten Änderung benötigt wird.

Ich hatte das gleiche Problem und habe es mit diesem Code gelöst

HTML

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

Sie können nur 3 erste Zeilen hinzufügen, die anderen Teile sind optional.

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

Beispiel hier: http://jsfiddle.net/XezmB/1303/