logo oujood
🔍

 Attribut d'événement HTML onselect

OUJOOD.COM

Définition et utilisation de l'événement onselect

LES BALISES HTML

L'attribut onselect se déclenche au moment où l'utilisateur sélectionne du texte à l'intérieur d'un champ de formulaire. C'est utile, par exemple, pour afficher une aide contextuelle, copier automatiquement le texte sélectionné ou tracer les interactions dans une interface.

Cet attribut fonctionne avec les éléments : <input type="text">, <input type="password">, <input type="file">, <keygen> et <textarea>. Il ne fonctionne pas sur un texte ordinaire dans un paragraphe <p> — uniquement sur des champs de saisie.

Syntaxe

<input onselect="script" />

Valeur d'attribut

Valeur

Description

script

Le code JavaScript à exécuter quand du texte est sélectionné dans l'élément.

Exemple : afficher un message lors d'une sélection de texte

Dans cet exemple, l'utilisateur saisit ou voit du texte dans un champ <input type="text">. Quand il sélectionne ce texte à la souris ou au clavier, la fonction voirMsg() se déclenche et affiche une alerte.

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
  <title>Exemple onselect</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script>
  function voirMsg() {
    alert("Vous avez sélectionné du texte !");
  }
  </script>
</head>
<body>
  <input type="text" value="Sélectionnez ce texte" onselect="voirMsg()">
  <p>La fonction voirMsg() s'exécute dès qu'un texte est sélectionné dans le champ.</p>
</body>
</html>

Exemple avancé : récupérer le texte sélectionné

Plutôt qu'une simple alerte, il est souvent plus utile de récupérer le contenu sélectionné et de l'afficher ailleurs dans la page. Voici comment faire avec selectionStart et selectionEnd :

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
  <title>Récupérer la sélection</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script>
  function afficherSelection(champ) {
    // selectionStart et selectionEnd indiquent la position du texte sélectionné
    var debut = champ.selectionStart;
    var fin   = champ.selectionEnd;
    var texte = champ.value.substring(debut, fin);
    document.getElementById("resultat").textContent = "Sélection : " + texte;
  }
  </script>
</head>
<body>
  <input type="text" value="Bonjour, sélectionnez un mot ici" onselect="afficherSelection(this)">
  <p id="resultat"></p>
</body>
</html>

Conseils pratiques

  • onselect ne se déclenche que sur des champs de saisie — pas sur du texte dans un <p> ou un <div>. Pour détecter une sélection dans n'importe quelle zone de la page, il faut écouter l'événement selectionchange sur le document.
  • Sur mobile (iOS Safari notamment), le comportement peut différer selon la façon dont l'utilisateur sélectionne : pression longue, double tap, etc. Tester sur appareil réel avant de mettre en production.
  • Les propriétés selectionStart et selectionEnd permettent de récupérer la portion exacte sélectionnée. C'est plus fiable que window.getSelection() dans un champ texte.
  • Éviter de déclencher des actions bloquantes (alertes, redirections) sur onselect : ça perturbe la sélection elle-même. Préférer une mise à jour discrète de l'interface.

Compatibilité navigateurs

L'attribut onselect est pris en charge dans tous les navigateurs modernes : Chrome, Firefox, Edge et Safari. Aucune configuration particulière n'est requise.

La seule exception notable concerne <input type="file">, dont le comportement sur onselect reste incohérent selon les navigateurs en 2026 — mieux vaut l'éviter sur ce type d'élément.

Différences entre HTML 4.01 et HTML5

Aucune différence de syntaxe. L'attribut existait déjà en HTML 4.01 et fonctionne de façon identique en HTML5.

cours precedent Retour à la Liste attribut d'événement 

    
Accueil du site

Par carabde 10 mars 2014 | Mis à jour le 8 avril 2026