8
votes

JavaScript Onchange Flèche Touches

OK, nous savons tous que Onchange est utilisé pour exécuter le code JavaScript sur une instruction SELECT lorsque l'option change. Toutefois, si vous modifiez une instruction SELECT à l'aide des touches fléchées, l'événement OnChange n'est pas appelé. Y a-t-il un moyen de contourner ceci? S'il vous plaît aider! Je suis OCD je sais.

- Edit 1 -

Il suffit de tester cela dans IE et les touches fléchées fonctionnent. Apparemment, c'est juste chrome. ** Va vérifier Firefox

- Edit 2 -

Testé dans Firefox et réalisé juste avant une réponse ci-dessous parlée sur l'action Onblur requise pour le changement. Donc la réponse ici est:

Internet Explorer reconnaît les événements d'échange du clavier ainsi que sur eux. Firefox et Chrome nécessitent tous deux des événements clés à suivre par l'événement de Blur afin d'appeler Onchange.

Maintenant normalement, je n'aime pas Internet Explorer, car c'est un morceau de poubelle ... mais je pense que je ... Malheureusement, je dois dire qu'ils ont un droit.

Ma compréhension sur le raisonnement de l'événement de Blur sur Chrome et Firefox est de sauvegarder des ressources, mais je ne suis pas d'accord avec cela. Je pense que cela devrait suivre l'interprétation littérale du commandement Onchange ... Soup ... Je suppose que je suis probablement trompé d'une manière ou d'une autre, cependant.


1 commentaires

Il sera appelé après que vous appuyiez sur Entrée ou l'onglet


6 Réponses :


4
votes

Je vous suggérerais d'écrire le code requis dans la touche Evénement pour capturer la touche Appuyez sur la touche et vérifiez également le code de clé. J'espère que cela aide


1 commentaires

Vous et Alienwebguy ont tous deux répondu avec des réponses appropriées, mais je ne peux pas accepter les réponses ... stupide ... de toute façon, votre réponse est la réponse appropriée à la question (comment se contenter de la question ci-dessus).



4
votes

Le défilement via une boîte de sélection n'est pas considéré comme un changement. Le changement se produit lorsque vous flouez () la valeur sélectionnée et la nouvelle valeur d'option est appliquée à l'élément Sélectionner.


0 commentaires

4
votes

Revenez à cela, il semble que, depuis la demande de cette question, Chrome incendie maintenant ONCHANGE après des événements clés. Firefox semble toujours attendre surblur. http://jsfiddle.net/2aqbn/ xxx

Spécification W3C semble suggérer d'utiliser un < code> entrée événement à la place.

Lorsque l'événement d'entrée s'applique, chaque fois que l'utilisateur provoque l'élément. valeur à modifier, l'agent utilisateur doit faire la queue une tâche pour tirer un simple événement que des bulles nommées entrées à l'élément d'entrée.

Cependant, aucun événement d'entrée ne semble tirer dans Chrome ou Firefox pour l'élément SELECT. (Juste des éléments d'entrée.)

Test démontrant la valeur actuelle vs la dernière valeur d'Onchange.

http://jsfiddle.net/teynon/mpyhk/5/

Firefox changera la valeur Onmouseover. Le changement de clé changera également la valeur. Cependant, l'Onchange n'a pas tiré. Si le formulaire soumet lorsque l'utilisateur dispose du menu SELECT Ouvrir, l'option actuellement mise en surbrillance est soumise.

de w3c:

Si l'attribut multiple est absent et que l'élément n'est pas désactivé, Ensuite, l'agent utilisateur doit permettre à l'utilisateur de choisir un élément d'option dans Sa liste d'options non désactivées. Sur cette option élément étant cueilli (soit par un clic, ou à travers des non-classiques l'élément après avoir changé sa valeur ou via une commande de menu, ou à travers tout autre mécanisme), et avant l'interaction pertinente de l'utilisateur L'événement est la file d'attente (par exemple avant l'événement de clic), l'agent utilisateur doit définir. la sélection de l'élément d'option cueilli sur la vraie et la file d'attente A tâche de déclencher un événement simple que les bulles nommées changent à la sélection élément, en utilisant la source de tâche d'interaction utilisateur comme source de tâche.

Il y a une longue discussion à https: //bugzilla.mozilla. org / show_bug.cgi? id = 126379 à ce sujet avec de nombreuses personnes demandant aux flèches de travailler. (Et certains défendant l'approche d'ONCHANGE.)

Certains utilisateurs ont suggéré que le W3C est intégré de la spécification pour le de l'élément modification de l'élément . Suggérant plutôt que nous proposons des modifications à la spécification de la manière dont nous nous attendons au SELECT SE ONCHANGE Fonctionnalité au travail.

La fonctionnalité actuelle n'est clairement pas intuitive à Un grand nombre de personnes basées uniquement sur le nombre de rapports de bogues. (Mozilla a 40 marqué comme des doublons.)


0 commentaires

2
votes

C'est un joli piratage sale, mais vous pouvez forcer le changer code> pour tirer en faisant ceci:

element.addEventListener('keyup', function(evt){
    evt.target.blur();
    evt.target.focus();
}, false);


0 commentaires

0
votes

Je pense à quelque chose comme ça (pour ne pas déclencher événement si la valeur n'était pas modifiée):

            select.keydown(function(){
                var _this = $(this);
                var _val = $(this).val();

                setTimeout(function(){    
                    if(_this.val() !== _val){
                        _this.trigger("change");
                    }
                }, 1);
            });


0 commentaires

0
votes

Voici une réalisation de cette demande. Pour la brièveté ne montant que le code. Voir https://github.com/ida/skriptz /blob/master/js/fields/select/Selector_Changed.js pour des explications longues dans les commentaires.

function addSelectionChangedListener(selectionEle, onChangeDoWithEle) {

  var selectedIndex = null

  function onChangeEvent(eve) {
    // If selection-change was caused of an option's click-event:
    if(eve.explicitOriginalTarget.tagName.toLowerCase() == 'option') {
      // We want to trigger passed event-handler:
      onChangeDoWithEle(eve.target)
    }
  }

  function onKeyEvent(eve) {

    // Key-event is keydown, remember current selectedIndex:
    if(eve.type == 'keydown') {
      selectedIndex = eve.target.selectedIndex
    }
    // Key-event is keyup, if selection changed, trigger passed handler:
    else if(selectedIndex != eve.target.selectedIndex) {
      onChangeDoWithEle(eve.target)
    }

  }

  selectionEle.onchange  = function(eve) onChangeEvent(eve)
  selectionEle.onkeydown = function(eve) onKeyEvent(eve)
  selectionEle.onkeyup   = function(eve) onKeyEvent(eve)

}


0 commentaires