Heim >Web-Frontend >CSS-Tutorial >Wie kann ich die Textauswahl auf meinen HTML-Seiten verhindern?

Wie kann ich die Textauswahl auf meinen HTML-Seiten verhindern?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-29 13:20:10528Durchsuche

How Can I Prevent Text Selection on My HTML Pages?

Textauswahl auf HTML-Seiten verhindern

Frage:

Um die Benutzeroberfläche eines zu verbessern HTML-Seite, wie können Textelemente, wie z. B. Tab-Namen, nicht auswählbar gemacht werden, um unbeabsichtigte Fehlfunktionen zu vermeiden? Hervorhebung?

CSS/HTML-Lösung:

In den meisten Browsern kann das folgende CSS angewendet werden:

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

   -ms-user-select: none;
   user-select: none;
}

Für Elemente, die dies nicht tun Erben Sie diese Eigenschaft, z. B. im IE < 10 und Opera kann das nicht auswählbare Attribut direkt zum gewünschten Element hinzugefügt werden:

<div>

JavaScript-Lösung:

Als rekursive Alternative zum manuellen Hinzufügen des nicht auswählbaren Attributs Für jedes Element innerhalb eines Containers kann JavaScript verwendet werden:

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"));

Das obige ist der detaillierte Inhalt vonWie kann ich die Textauswahl auf meinen HTML-Seiten verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn