web-dev-qa-db-fra.com

événement onchange pour le type d'entrée = "numéro"

Comment puis-je gérer un échange pour <input type="number" id="n" value="5" step=".5" />? Je ne peux pas faire de keyup ou keydown, car l'utilisateur peut simplement utiliser les flèches pour modifier la valeur. Je voudrais le gérer chaque fois que cela change, pas seulement en fonction du flou, ce que l'événement .change() a, je pense, fait. Des idées?

jqueryhtml5
71
Ian Davis

Utilisez mouseup et keyup

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

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

124
JohnColvin

L'événement oninput (.bind('input', fn)) couvre les modifications des frappes au clavier en cliquant sur les flèches et le collage clavier/souris, mais n'est pas pris en charge dans 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>
57
Flo

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

C'est un peu ghetto, mais de cette façon, vous pouvez utiliser l'événement "click" pour capturer l'événement qui se produit lorsque vous utilisez la souris pour incrémenter/décrémenter à l'aide des petites flèches situées sur l'entrée. Vous pouvez voir comment j'ai intégré une petite routine manuelle de "vérification du changement" qui garantit que votre logique ne se déclenchera que si la valeur a réellement changé (pour éviter les faux positifs dus à de simples clics sur le champ).

7
Jake Feasel

Pour détecter lorsque la souris ou la touche sont enfoncées, vous pouvez également écrire:

$(document).on('keyup mouseup', '#your-id', function() {                                                                                                                     
  console.log('changed');
});
4
Kingsley Ijomah
$(':input').bind('click keyup', function(){
    // do stuff
});

Démo: http://jsfiddle.net/X8cV3/

3
AlienWebguy

Étant donné que $("input[type='number']") ne fonctionne pas sur IE, nous devrions utiliser un nom de classe ou un identifiant, par exemple, $('.input_quantity').

Et n'utilisez pas la méthode .bind(). La méthode .on() est la méthode recommandée pour attacher des gestionnaires d'événements à un document.

Donc, ma version est:

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>
2
SandroMarques
<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/

J'ai utilisé un type d'entrée masqué comme conteneur de la valeur précédente qui sera nécessaire pour la comparaison lors du prochain changement.

1
Patrick Robles

J'ai eu le même problème et j'ai résolu en utilisant ce code

HTML

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

Vous ne pouvez ajouter que 3 premières lignes, les autres parties étant facultatives.

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

Exemple ici: http://jsfiddle.net/XezmB/1303/

1
Bruno Ribeiro
$("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");
});
1
N K

Il y a peut-être une meilleure solution, mais voici ce qui m'est venu à l'esprit:

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

Voici un exemple de travail .

Il lie simplement un gestionnaire d’événements aux événements keyup, change et click. Il vérifie si la valeur a changé ou non et, si tel est le cas, stocke la valeur actuelle pour pouvoir le vérifier à nouveau. La vérification est nécessaire pour traiter l'événement click.

1
James Allardice