Maison > interface Web > js tutoriel > Comment javascript gère le focus

Comment javascript gère le focus

藏色散人
Libérer: 2021-10-18 14:11:54
original
2338 Les gens l'ont consulté

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.

Comment javascript gère le focus

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>
Copier après la connexion

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>
Copier après la connexion

Comment javascript gère le focus

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal