Maison > interface Web > tutoriel CSS > Comment puis-je désactiver la sélection de texte dans mon interface utilisateur HTML ?

Comment puis-je désactiver la sélection de texte dans mon interface utilisateur HTML ?

Linda Hamilton
Libérer: 2024-12-09 12:14:10
original
444 Les gens l'ont consulté

How Can I Disable Text Selection in My HTML UI?

Désactiver la sélection de texte pour une expérience utilisateur améliorée

Lors de la conception d'interfaces utilisateur HTML, certains éléments de texte, comme les noms d'onglets, peuvent sembler indésirables lorsqu'ils sont sélectionnés . Pour éviter cela, envisagez de mettre en œuvre l'une des méthodes suivantes.

Solution CSS

Pour la plupart des navigateurs, le style CSS suivant peut rendre le texte non sélectionnable :

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
Copier après la connexion

Attribut HTML pour IE et Opera

Pour les navigateurs comme IE (version inférieure à 10) et Opera, utilisez l'attribut non sélectionnable :

<div>
Copier après la connexion

Récursion JavaScript pour les zones non sélectionnables étendues

Pour les cas où l'imbrication est impliquée, utilisez JavaScript pour définir de manière récursive l'attribut non sélectionnable :

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"));
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal