Maison > Article > interface Web > Comment javascript gère le focus
Comment javascript gère le focus
- 藏色散人original
- 2021-10-18 14:11:542303parcourir
Méthodes permettant à JavaScript de gérer le focus : 1. Obtenez le focus via la méthode "field.focus();" 2. Gérez la perte de focus via "o[i].blur = function(){...}" méthode.
L'environnement d'exploitation de cet article : système Windows7, javascript version 1.8.5, ordinateur DELL G3
Comment javascript gère-t-il le focus ?
Traitement de la mise au point JavaScript (obtenir la mise au point, perdre le flou de mise au point)
Traitement de la mise au point
Le traitement de la mise au point comprend principalement les types d'événements de mise au point (obtenir la mise au point) et de flou (perdre la mise au point). L'objectif est d'activer le champ de formulaire afin qu'il puisse répondre aux événements du clavier.
Obtenir le focus : focus
Cet événement est déclenché lorsque vous cliquez ou utilisez la touche Tab pour basculer vers un élément de formulaire ou un objet lien hypertexte. L'événement focus est un moyen de déterminer la position actuelle de la souris dans la page. Par défaut, l'ensemble du document est mis au point, mais vous pouvez modifier la position du focus en cliquant ou en utilisant la touche Tab. '
Exemple : Une fois la page chargée, transférez le focus sur le premier champ de zone de texte du formulaire, en le préparant à recevoir les entrées de l'utilisateur
<form id="myform" method="post" action="#">
姓名<input type="text" name="name"/><br>
密码<input type="password" name="pass" /></form>
<script>
var form = document.getElementById("myform");
var field = form.elements("name");
window.onload = function(){
field.focus();
}
</scriipt>Focus perdu : flou
Le type d'événement flou indique quand un élément perd le focus lors de la réponse , il correspond au type d'événement focus, et agit principalement sur les éléments de formulaire et les objets lien hypertexte
Exemple : liez les fonctions de traitement des événements de focus et de flou à tous les éléments du formulaire d'entrée, et définissez l'élément pour qu'il soit déclenché lorsqu'il perd le focus. est bosselé
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title> </head> <body>
<input type="text" />
<input type="text" />
<script>
var o = document.getElementsByTagName("input");
for(var i = 0; i < o.length; i++){
o[i].onfocus = function(){
this.style.borderStyle = "outset";
}
o[i].blur = function(){
this.style.borderStyle = "inset";
} }
</script>
</body></html>
Remarque : Si le champ est masqué (), ou si le champ est affiché à l'aide de l'affichage et de la visibilité du CSS, le définir pour obtenir le focus provoquera une exception.
Apprentissage recommandé : "Tutoriel sur les bases de JavaScript"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!