HTML attribut d'événement onfocus

Définition et utilisation événement onfocus

LES BALISES HTML

L'attribut d'événement onfocus déclenche au moment où l'élément obtienne le focus.
L’événement onfocus est fréquemment utilisé avec <input>, <select> et <a>.
astuce Astuce : L'attribut onfocus est le contraire de l'attribut onblur .

Remarque : L'attribut onfocus ne peut pas être utilisé avec : <base>, <bdo>, <br>, <hr>, <head>, <html>, <iframe>, <meta>, <link>, <param>, <script>, <style>, ou <title>.

Syntaxe

<input onfocus="script" />
Valeurs d'attribut

Valeur	Description
script	Le script à exécuter sur onfocus

Exemple Exécuter un JavaScript lorsqu'un champ de saisie obtienne le focus :

Exemple : Copier le code

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>html5 demo</title>
  <script>
  function donneStyle(x)
  {
  document.getElementById(x).style.background="yellow";
  }
  </script>
  </head>
  <body>
  <p>
  Une fonction est déclenchée lorsque l'une des zones de saisie reçoie le focus. La
  fonction change la couleur de fond du champ de saisie..</p>
  Nom: <input type="text" id="nom"
  onfocus="donneStyle(this.id)"><br><br>
  Prénom: <input type="text" id="pnom" onfocus="donneStyle(this.id)">
  </body>
  </html>

ce code ajoute une fonctionnalité interactive à la page pour changer la couleur de fond d'un champ de saisie lorsque celui-ci reçoit le focus

aute exemples pratiques

Voici un exemple simple d'utilisation de l'événement onfocus :

Exemple : Copier le code

	<input type="text" onfocus="afficherMessage()">

	<script>
		function afficherMessage() {
			alert('L\'élément a le focus !');
		}
	</script>

Dans cet exemple, une boîte de dialogue s'affichera lorsque l'utilisateur cliquera sur le champ de texte.

Astuces et conseils d'utilisation

Assurez-vous que l'événement onfocus est utilisé de manière judicieuse, car il peut affecter l'expérience utilisateur.
Évitez de surcharger votre interface avec des actions lors du focus, afin de ne pas perturber les utilisateurs.
Utilisez l'événement onblur pour détecter quand un élément perd le focus.