2009-05-29 7 views
0

J'ai un tableau HTML, et chaque ligne a une case à cocher pour sélectionner ou désélectionner sa ligne. Chaque fois qu'une case à cocher change de valeur, j'ai besoin d'ajouter ou de supprimer la surbrillance sur la ligne et de m'assurer que le bouton de soumission de la page n'est activé que lorsqu'au moins une ligne est sélectionnée et désactivée.Problème IE: interaction du clavier avec la case à cocher

Le gestionnaire d'événements de case à cocher est définie par la fonction suivante:

function getCheckboxCallback() { 
    return function() { 
    var parentRow = getParentRow(this); 
    if (!parentRow) { 
     return; // No parent row found; abort 
    } 

    // Adjust the appearance of the row 
    setSelected(parentRow, this.checked); 

    // Count the number of selected table rows, and disable the submit 
    // button whenever no rows are selected 
    enforceInvariants(); 

    return true; 
    }; 
} 

Ailleurs dans le même module, les cases à cocher sont donnés les gestionnaires d'événements:

checkbox.onchange = getCheckboxCallback(); 
checkbox.onclick = getCheckboxCallback(); // alleged IE fix 

Je travaille sous Windows XP , et tout fonctionne bien dans Firefox 3 et Opera 9. Cependant, IE 7 ne gère pas bien l'interaction au clavier (l'interaction de la souris fonctionne bien). Le problème est que si une case à cocher a le focus et que je clique sur la barre d'espace, la case à cocher n'est pas vérifiée - à la place, elle est à moitié vérifiée (elle a la même apparence que celle obtenue immédiatement après un mousedown) . Je dois appuyer une seconde fois sur la barre d'espace pour cocher la case. De même, il faut deux pressions sur les touches pour le décocher. Assez curieusement, si je maintiens la barre d'espace pendant quelques instants, alors une seule presse fonctionne comme prévu.

Quelqu'un peut-il expliquer ce qui se passe ici? Y at-il quelque chose que je fais mal dans le code JavaScript qui provoque ce comportement? Comment puis-je réparer cela?

Répondre

1

Malheureusement, les handles IE se modifient différemment des autres navigateurs. IE l'interprète comme signifiant "flou après changement". Notez que bien que cela ne soit pas très utile, il est techniquement correct selon la spécification: "L'événement onchange se produit lorsqu'un contrôle perd le focus d'entrée et que sa valeur a été modifiée depuis le focus"

Vous pouvez essayer Evénement IE uniquement "onpropertychange".

Référence: http://lhorie.blogspot.com/2007/04/fixing-ie7-onchange-bug-on-checkboxes.html

+0

Mais comment ce compte le fait que les presses de barre d'espace ne sont pas à l'origine de la case à vérifier? –

+0

Je ne peux pas expliquer ce comportement. Vous pouvez essayer d'ajouter un événement keydown sur la case à cocher, et examiner le comportement en utilisant un débogueur, ou en utilisant l'événement keydown pour vérifier une barre d'espace appuyez sur (event.keyCode === 32). – BarelyFitz

Questions connexes