Jquery Listbox événement de Changement ne fait pas de feu sur le Clavier de défilement

J'ai une simple liste sur un formulaire HTML et cette base de jQuery code

    //Toggle visibility of selected item
    $("#selCategory").change(function() {
        $(".prashQs").addClass("hide");
        var cat = $("#selCategory :selected").attr("id");
        cat = cat.substr(1);
        $("#d" + cat).removeClass("hide");
    });

L'événement de changement de feux d'amende lorsque l'élément est sélectionné à l'aide de la Souris, mais quand j'ai faites défiler les éléments à l'aide du clavier de l'événement n'est pas déclenché et mon code ne s'exécute jamais.

Est-il une raison à ce comportement? Et quelle est la solution?

InformationsquelleAutor Cyril Gupta | 2009-08-06
  1. 21

    La onchange événement n'est en général pas tiré jusqu'à ce que l'élément perd le focus. Vous aurez également besoin d'utiliser onkeypress. Peut-être quelque chose comme:

    var changeHandler = function() {
    $(".prashQs").addClass("hide");
    var cat = $("#selCategory :selected").attr("id");
    cat = cat.substr(1);
    $("#d" + cat).removeClass("hide");
}

$("#selCategory").change(changeHandler).keypress(changeHandler);

    Vous aurez envie à la fois onchange et onkeypress pour tenir compte à la fois la souris et l'interaction du clavier respectivement.

    • mais j'ai obtenu une pression de touche, dans ce cas, ne fonctionne pas dans tous les navigateurs sauf FireFox, j'ai testé sur chrome, safari et IE et n'a pas de travail.
    • keypress événement ne fonctionne pas sur chrome, mais keyup fonctionné correctement
    InformationsquelleAutor Justin Johnson
  2. 4

    Parfois, le changement de comportement peut varier d'un navigateur, comme une solution de contournement, vous pourriez faire quelque chose comme ceci:

     //Toggle visibility of selected item
    $("#selCategory").change(function() {
        $(".prashQs").addClass("hide");
        var cat = $("#selCategory :selected").attr("id");
        cat = cat.substr(1);
        $("#d" + cat).removeClass("hide");
    }).keypress(function() { $(this).change(); });

    Vous pouvez la chaîne d'événements que vous souhaitez et manuellement le feu de l'événement change.

    IE:

    var changeMethod = function() { $(this).change(); };
....keypress(changeMethod).click(changeMethod).xxx(changeMethod);
    • Vous avez raison de dire que cela est dû à la croix-l'incompatibilité du navigateur.
    InformationsquelleAutor Quintin Robinson
  3. 1

    Le comportement que vous décrivez, l'événement de changement de déclenchement à l'aide du clavier de défilement dans un élément select, est en fait un Internet Explorer bug. Le DOM Niveau 2 de l'Événement cahier des charges définit les change événement comme ceci:

    Le changement événement se produit lorsqu'un contrôle
    perd le focus d'entrée et sa valeur
    a été modifié depuis l'accès à l'accent.
    Cet événement est valable pour la SAISIE, SÉLECTIONNEZ,
    et TEXTAREA. élément.

    Si vous voulez vraiment ce comportement, je pense que vous devriez regarder les événements de clavier.

    $("#selCategory").keypress(function (e) { 
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 38 || keyCode == 40) { //if up or down key is pressed
     $(this).change(); //trigger the change event
  } 
});

    Vérifier un exemple ici...

    • Comment puis-je produire ce comportement dans Firefox alors? Je veux que mon contenu soit mis à jour sur listitem changé alors que l'accent est toujours sur la boîte.
    • +1 j'ai trouvé la solution utiliser événement keyup en plus de changer.
    • Vous devriez noter que keyup sera pas appelée si un keydown est enfoncée et maintenue jusqu'à ce que la clé est de laisser aller, le navigateur peut rouler à travers les différents éléments de la liste en tant que la touche est pressée. Je voudrais assurez-vous que ne pas avoir d'effets négatifs sur le code qui s'appuie sur activer les modifications.
    InformationsquelleAutor CMS
  4. 0

    J'ai eu ce problème avec IE sous JQuery 1.4.1 - les événements de changement sur les zones de liste déroulante n'étaient pas de tir si le clavier a été utilisé pour effectuer le changement.

    Semble avoir été corrigé dans JQuery 1.4.2.

    InformationsquelleAutor Jonathan Moffatt
  5. 0
    $('#item').live('change keypress', function() { /* code */ });
    • live est obsolète. Utilisation on au lieu de cela, et si vous n'êtes pas à l'aide de jQuery 1.7 ou au-dessus, l'utilisation delegate.
    • Merci 🙂
    • Vous êtes les bienvenus 🙂 Pour plus d'informations, voir liveisdeprecated.com
    InformationsquelleAutor Brynner Ferreira