événements onblur et onfocus en Js (tutoriel graphique)

Dans les pages HTML, les éléments visuels tels que les boutons et les zones de texte ont des événements qui ont ou perdent le focus. Ces événements peuvent déclencher des opérations prédéfinies en réponse aux actions de la souris ou du clavier. Cet article prend comme exemple la zone de texte qui gagne et perd le focus pour expliquer brièvement l'application de onfocus et onblur.

1. onfocus (obtenir l'événement focus)

Lorsqu'une zone de texte obtient le focus, tout le texte qu'elle contient est automatiquement sélectionné comme la zone de saisie de recherche Baidu sur le site Web "Hao123", par exemple l’opération peut être réalisée en utilisant onfocus.

Lorsque le pointeur de la souris passe sur la zone de texte suivante, tout le texte à l'intérieur sera sélectionné :

Veuillez saisir l'URL

Comment faire cela ? Regardez le code et l'explication suivants :

<input type="text"name="url" value="http://www.gxblk.com" size="30"onmousemove="this.focus();this.select();">

Dans le code, l'instruction JS de l'événement onmousemove (passage du pointeur de la souris) est intégrée dans la balise d'entrée this.focus() après le signe égal. signifie qu'il obtient le focus ; Le signe de l'obtention du focus est que le curseur de saisie apparaîtra dans la zone de texte, mais pour que tout le texte qu'il contient soit sélectionné, nous devons utiliser l'instruction this.select(), ce qui signifie sélectionner. tout le texte dans la zone de texte.

2. onblur (événement de perte de focus)

Nous détectons souvent si la zone de texte a été saisie correctement. La détection est généralement effectuée après que l'utilisateur a cliqué sur le bouton de soumission. perd Lorsque le focus est activé, nous pouvons effectuer ce travail de détection en temps réel. Dans ce cas, l'événement onblur est pratique.

L'exemple suivant comporte quatre zones de texte. S'il n'y a aucun clic sur aucune d'entre elles, rien ne se passera. Cependant, lorsque vous cliquerez sur l'une d'elles, elle aura le focus (le curseur de saisie). est à l'intérieur), si vous ne saisissez rien et cliquez ailleurs pour le faire perdre le focus, un avertissement apparaîtra. Essayez

Nom

Sexe

Âge

.

Adresse

Ce qui suit est le code et l'explication :

Code du formulaire

<form name="blur_test">
   <p>姓名 <input type="text" name="name"value="" size="30"onblur="chkvalue(this)"><br>
    性别 <inputtype="text" name="sex" value=""size="30" onblur="chkvalue(this)"><br>
    年龄 <inputtype="text" name="age" value=""size="30" onblur="chkvalue(this)"><br>
    住址 <inputtype="text" name="addr" value=""size="30" onblur="chkvalue(this)"></p>
</form>

Code JS

<scriptlanguage="javascript">
function chkvalue(txt) {
   if(txt.value=="") alert("文本框里必须填写内容!");
}
</script>

Dans le code du formulaire , chaque code de boîte est intégré à une instruction JS onblur. Ils appellent tous la fonction personnalisée chkvalue(this) dans le code JS suivant, ce qui signifie que chkvalue() est appelée lorsque la zone de texte perd le focus. détecte si la zone de texte est vide et si c'est le cas, une fenêtre d'avertissement apparaît. Cette fonction possède un paramètre (txt), qui correspond au paramètre (this) utilisé par la zone de texte précédente pour appeler la fonction, qui est elle-même.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Explication détaillée du code sur la façon dont JavaScript implémente le tri rapide

Comment JavaScript implémente le tri à bulles dans un fichier encapsulé manière

Explication détaillée du mécanisme de fonctionnement JavaScript et de l'analyse conceptuelle

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!