Comment empêcher la sélection de texte à l'intérieur d'un élément DIV ?

Empêcher la sélection de texte dans un élément DIV

Dans certains scénarios, il devient crucial de garantir que le texte spécifique dans un élément DIV reste non sélectionnable par l'utilisateur. Par exemple, vous pouvez rencontrer des situations dans lesquelles un grand texte translucide superposé à une zone de texte sert de filigrane. Bien que l'esthétique puisse être agréable, une sélection involontaire de ce texte peut constituer un obstacle.

Inefficacité de l'index Z

Au départ, on peut supposer que la manipulation de l'index z la propriété résoudrait ce problème. En attribuant une valeur d'indice z inférieure au texte du filigrane, il serait théoriquement rendu en dessous de la zone de texte à indice z plus élevé. Cependant, les navigateurs ne tiennent pas compte des couches d'index z lors de la détermination de la sélection du texte.

Solution CSS

Pour obtenir le comportement souhaité, CSS propose une solution simple :

.watermark {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

Ce code complet s'adresse à plusieurs navigateurs, désactivant efficacement la sélection de texte dans l'élément DIV avec la classe "filigrane."

Extension jQuery

Alternativement, si vous préférez une approche basée sur jQuery, envisagez d'utiliser l'extension suivante :

$('.watermark').disableSelection();

Cette extension empêche explicitement la sélection dans les éléments DIV spécifiés.

La mise en œuvre de l'une ou l'autre de ces méthodes garantira que le texte du filigrane reste non sélectionnable, améliorant l'expérience utilisateur et empêchant les modifications de texte indésirables.

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!