Comment puis-je empêcher la sélection de texte sur ma page HTML ?

Désélectionner du texte sur une page HTML : un guide complet

Dans le domaine de l'expérience utilisateur, il peut être souhaitable d'empêcher la sélection de texte sur certains éléments d'une page HTML. Ceci est particulièrement pertinent pour des éléments tels que les noms d'onglets, qui peuvent sembler peu attrayants lorsqu'ils sont mis en surbrillance.

Solution CSS

Heureusement, la plupart des navigateurs modernes proposent une solution basée sur CSS :

*.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;

  /* IE 10+ */
  -ms-user-select: none;
  user-select: none;
}

Ajoutez simplement ce code à votre feuille de style, et les éléments désignés deviendront non sélectionnable.

Alternative à IE et Opera

Pour les versions antérieures d'Internet Explorer et d'Opera, l'attribut non sélectionnable peut être utilisé :

<div>
<p>Cependant , notez que cet attribut n'est pas hérité, vous devrez donc peut-être le définir explicitement pour chaque descendant element.</p>
<p><strong>Solution JavaScript récursive</strong></p>
<p>Si vous rencontrez des problèmes d'héritage, vous pouvez utiliser JavaScript pour appliquer l'attribut non sélectionnable de manière récursive :</p>
<pre class="brush:php;toolbar:false">function makeUnselectable(node) {
  if (node.nodeType == 1) {
    node.setAttribute("unselectable", "on");
  }
  var child = node.firstChild;
  while (child) {
    makeUnselectable(child);
    child = child.nextSibling;
  }
}

makeUnselectable(document.getElementById("foo"));