Javascript implémente l'appui sur la touche Entrée pour changer de compétences focus_javascript

J'ai appris le HTML et le CSS il y a quelque temps et je me suis intéressé à cet aspect. J'ai également commencé à apprendre la programmation avancée JavaScript (troisième édition) que j'apprends ces jours-ci et je viens d'apprendre les événements et les scripts de formulaires. Il y a quelques jours, le professeur m'a demandé d'écrire un bout de code : sous une forme javascript, utiliser la touche entrée et les touches haut, bas, gauche et droite pour déplacer le focus d'une zone de texte vers le texte précédent ou suivant. boîte. En appliquant les connaissances acquises jusqu'à présent, j'ai essayé d'écrire du code. J'ai rencontré plusieurs difficultés lors du processus d'écriture : le calcul modulo en utilisant ceci et les arguments à l'intérieur de la fonction pour trouver l'événement déclencheur ; l'événement. Avec l'aide du professeur, j'ai résolu les problèmes ci-dessus. Je sens que j'ai appris beaucoup de connaissances grâce à ce code, j'écrirai donc des commentaires après l'avoir terminé et je le publierai.

Copier le code Le code est le suivant :

   
   


   

       

       

       

       

       

       

<script><br>          fonction is_down(e) {<br>           var isDown;<br>               e = e || commutateur (e.keyCode) {<br> cas 13 : //Touche Entrée<br> cas 39 : //Déplacer la touche droite<br> cas 40 : //Touche de déplacement vers le bas<br>                                                                                                                                                                                                                                                                          isDown = true ;<br> pause;<br> cas 37 : //Déplacer la touche gauche<br> cas 38 : //Touche de déplacement vers le haut<br>                                                                                                                                                                                                                                                            isDown = false;<br> pause;<br>             }<br>               return isDown ;<br> ><br>          fonction key_up(){<br> //Lors de l'appel d'une fonction, la fonction elle-même générera ceci et des arguments<br> //Utilisez ceci et les arguments pour trouver respectivement le champ et l'événement déclenché<br>             var e=arguments[1];<br>                 return is_down(e) === undefined true : handle_element(this, is_down(e));<br> ><br>           function handle_element(field, is_down) {<br>           var elements = field.form.elements;<br> pour (var i = 0, len = elements.length-1; i < len; i ) {<br /> Si (champ == éléments[i]) {<br /> pause;<br />                 }<br />             }<br /> je = is_down ? (i 1) % len : (i - 1) % len;<br /> //(0===i && is_down) --> Une fois que la dernière zone de texte a obtenu le focus, appuyez sur la touche bas <br> //(-1===i && !is_down) --> Une fois que la première zone de texte a obtenu le focus, appuyez sur la touche haut <br> Si((0===i && is_down)||(-1===i && !is_down)){<br>                    return true ;<br>             }<br>              éléments[i].focus();<br>           var element_arr = ['button', 'submit', 'reset', 'select-one', 'textarea'];<br> Si (element_arr.join(',').indexOf(elements[i].type) > -1)<br>                  éléments[i].select();<br>               return false ;<br> ><br> //Annulez l'événement du formulaire de soumission par défaut sur Entrée<br>           document.onkeydown = function(e) {<br>               e = e || Si(e.keyCode == 13) {<br>e.preventDefault ? e.preventDefault() : (e.returnValue = false);<br>             }<br>         };<br> //Reconnaissance multi-navigateurs addEventListener et attachEvent(IE)<br>          function addHandler(élément, type, gestionnaire) {<br>               if (element.addEventListener)<br>                                           element.addEventListener(type, handler, false);<br>               else if (element.attachEvent)<br>                   element.attachEvent(type "on", gestionnaire);<br>           autre<br>                       element["on" type] = handler;<br> ><br>          var elements = document.forms[0].elements;<br> pour (var i = 0, len = elements.length; i < len; i ) {<br /> //Ajouter un gestionnaire d'événement key_up pour l'événement keyup<br />               addHandler(elements[i], "keyup", key_up);<br /> ><br /> </script>

Ce qui précède est l'intégralité du contenu du code. Personnellement, j'estime que l'écriture est assez complète et que tous les endroits qui doivent être pris en compte ont été traités.