J'ai appris HTML et CSS il y a quelque temps, je me suis intéressé à ce domaine et j'ai commencé à apprendre une programmation avancée en Javascript (troisième édition). J'ai appris ces jours-ci et je viens d'apprendre le contenu des événements et de former des scripts. Il y a quelques jours, l'enseignant m'a demandé d'écrire un morceau de code: sous un formulaire JavaScript, utilisez la touche Entrée et les touches mobiles de haut en bas à gauche et à droite pour déplacer la focus d'une zone de texte vers la zone de texte précédente ou suivante. J'ai essayé d'écrire du code en utilisant les connaissances que j'ai apprises jusqu'à présent. J'ai rencontré plusieurs difficultés par écrit: calcul du module; Utilisez ceci et les arguments pour trouver l'événement de déclenchement à l'intérieur de la fonction; Utilisez la méthode AddHandler () pour ajouter des gestionnaires d'événements à l'événement. Avec l'aide de l'enseignant, j'ai résolu les problèmes ci-dessus. J'ai senti que j'avais appris beaucoup de connaissances grâce à ce code, alors j'ai écrit un commentaire après l'avoir réglé et l'avoir publié.
La copie de code est la suivante:
<html>
<head lang = "en">
<meta charset = "utf-8">
<Title> </Title>
</ head>
<body>
<formulaire
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "soumi"> </div>
</ form>
<cript>
fonction is_down (e) {
Var Ssown;
E = E || window.event;
commutateur (e.KeyCode) {
Cas 13: // Entrez la clé
Cas 39: // Déplacez la clé vers la droite
cas 40: // descendre la touche
issown = true;
casser;
Cas 37: // Déplacez la clé vers la gauche
Cas 38: // Déplacez la clé
isown = false;
casser;
}
retour d'Isdown;
}
function key_up () {
// Lors de l'appel de la fonction, la fonction elle-même générera ceci et les arguments
// Utilisez ceci et les arguments pour trouver respectivement le champ et déclencher des événements
var e = arguments [1];
return is_down (e) === Undefined? true: handle_element (this, is_down (e));
}
function handle_element (champ, is_down) {
var elements = field.form.elements;
pour (var i = 0, len = elements.length-1; i <len; i ++) {
if (field == Elements [i]) {
casser;
}
}
i = est_down? (i + 1)% len: (i - 1)% len;
// (0 === i && is_down) -> Appuyez sur la touche Down après que la dernière zone de texte soit acquise Focus
// (- 1 === i &&! Is_down) -> Appuyez sur la touche UP après la focalisation de la première zone de texte
if ((0 === i && is_down) || (-1 === i &&! is_down)) {
Retour Vrai;
}
éléments [i] .focus ();
var element_arr = ["Button ',' soumettre ',' réinitialiser ',' select-one ',' textarea '];
if (element_arr.join (','). indexof (elements [i] .type)> -1)
éléments [i] .select ();
retourne false;
}
// Annuler Entrez l'événement de formulaire de soumission par défaut
document.onkeydown = fonction (e) {
E = E || window.event;
if (e.Keyycode == 13) {
E.PreventDefault? e.PreventDefault (): (e.reTurnValue = false);
}
};
// Reconnaître AddEventListener et attachEvent (IE) à travers les navigateurs
fonction addHandler (élément, type, gestionnaire) {
if (element.addeventListener)
element.adDeventListener (type, gestionnaire, false);
else if (element.attachevent)
element.Attachevent ("ON" + type, gestionnaire);
autre
élément ["on" + type] = handler;
}
var elements = document.forms [0] .Elements;
pour (var i = 0, len = elements.length; i <len; i ++) {
// Ajouter le gestionnaire d'événements KEY_UP pour l'événement KETYUP
addHandler (elements [i], "keyup", key_up);
}
</cript>
</docy>
</html>
Ce qui précède est tout le contenu du code. Je pense personnellement que l'écriture est assez complète et que toutes les choses qui devraient être prises en compte ont été traitées. J'espère que tout le monde aime ça.