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
Freigeben: 2024-12-29 13:20:10
Original
520 Leute haben es durchsucht

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;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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"));
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage