Quels sont les attributs onfocus et onblur en HTML ? Comment utiliser ?

Quels sont les attributs onfocus et onblur en HTML ? Comment utiliser ? Cet article vous présentera ce que sont l'attribut onfocus et l'attribut onblur, et vous fera connaître l'utilisation simple de l'attribut onfocus et de l'attribut onblur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d'abord, nous devons savoir que onfocus et onblur sont des attributs d'événement du HTML. Ensuite, nous présenterons brièvement ces deux attributs.

1. Attribut d'événement onfocus

L'attribut onfocus est déclenché lorsque l'élément obtient le focus, c'est-à-dire : obtenir l'événement focus ; ;select> et dans la balise

Remarque : L'attribut onfocus ne peut pas être utilisé dans les éléments suivants : , ,
, , ,

2. Attribut d'événement onblur

L'attribut onblur est déclenché lorsque l'élément perd le focus, c'est-à-dire : événement de focus perdu souvent utilisé dans le code de validation de formulaire (par exemple, l'utilisateur quitte le champ du formulaire) au milieu.

Explication :

1. L'attribut onfocus est opposé à l'attribut onblur.

2. Tous les principaux navigateurs prennent en charge l'attribut onfocus et l'attribut onblur.

Ci-dessous, nous présentons l'utilisation de l'attribut onfocus et de l'attribut onblur à travers des exemples de code simples.

Utilisation de l'attribut d'événement html onfocus

Exemple de code : fonction de déclenchement lorsque le champ de saisie obtient le focus. Cette fonction change la couleur de fond (jaune) du champ de saisie

<script>
function setStyle(x){
   document.getElementById(x).style.background="yellow";
}
</script>

<div>
   <p>当输入字段获得焦点时触发函数。此函数改变输入字段的背景色。</p>
   用户名: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
   密   码: <input type="password" id="lname" onfocus="setStyle(this.id)">
</div>

Rendu :

Utilisation de l'événement html onblur attribut

Exemple de code : Valider le champ de saisie lorsque l'utilisateur le quitte : convertir les lettres minuscules en majuscules

<script>
function upperCase(){
   var x=document.getElementById("fname").value
   document.getElementById("fname").value=x.toUpperCase()
}
</script>
<div>
	<p>请输入您的姓名，然后把焦点移动到字段外：</p>
        用户名（英文字符）：<input type="text" name="fname" id="fname" onblur="upperCase()">
</div>

Rendu :

Résumé : ce qui précède est l'intégralité du contenu des attributs d'événement html onfocus et onblur présentés dans cet article. Vous pouvez essayer de le compiler vous-même pour approfondir votre compréhension. J'espère que cela vous sera utile pour votre apprentissage.

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!