evento onchange per tipo di input = "numero"

Question

Come posso gestire un onchange per <input type="number" id="n" value="5" step=".5" />? Non riesco a fare uno keyup o keydown, perché l'utente può semplicemente usare le frecce per cambiare il valore. Vorrei maneggiarlo ogni volta che cambia, non solo sulla sfocatura, che penso sia l'evento .change(). Qualche idea?

Answer 1

Usa mouseup e keyup

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

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

Answer 2

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 'del ghetto, ma in questo modo è possibile utilizzare l'evento "click" per catturare l'evento che viene eseguito quando si utilizza il mouse per aumentare/diminuire tramite le piccole frecce sul l'input. Puoi vedere come ho costruito una piccola routine di "change check" manuale 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).

Answer 3

ci può essere una soluzione migliore, ma questo è quello che è venuto in mente:

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

Ecco un working example.

Semplicemente associa un gestore di eventi agli eventi keyup, change e click. Controlla se il valore è stato modificato o meno e, in tal caso, memorizza il valore corrente in modo che possa verificare nuovamente la volta successiva. Il controllo è necessario per gestire l'evento click.

Answer 4

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

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

Answer 5

Il oninput evento (.bind('input', fn)) si estende su eventuali modifiche da sequenze di tasti per freccia clic e tastiera/incolla il mouse, ma non è supportata in IE < 9.

Answer 6

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

OR

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

Answer 7

<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 usato un tipo di input nascosto di essere il contenitore del valore precedente che sarà necessario per il confronto sul prossimo cambiamento.

Answer 8

per rilevare quando vengono premuti il ​​mouse o il tasto, è possibile anche scrivere:

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

Answer 9

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

e non utilizzare .bind() metodo. Il .Il metodo() è il metodo preferito per il collegamento di 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> 

Answer 10

Ho avuto lo stesso problema e ho risolto utilizzando questo codice

HTML

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

È possibile aggiungere solo le prime 3 linee le altre parti è facoltativo.

$('#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/