Heim > Web-Frontend > CSS-Tutorial > Wie deaktiviere ich die Textauswahl in HTML?

Wie deaktiviere ich die Textauswahl in HTML?

Mary-Kate Olsen
Freigeben: 2024-11-10 19:31:03
Original
629 Leute haben es durchsucht

How to Disable Text Selection in HTML?

Nicht auswählbarer HTML-Text: Beyond Vanilla HTML

Während einfaches HTML allein die Textauswahl nicht verhindern kann, können verschiedene Techniken eingesetzt werden, um diese Einschränkung zu überwinden. Eine dieser Methoden beinhaltet die Nutzung von CSS3:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
Nach dem Login kopieren

Die Integration dieses Stils in das HTML-Element deaktiviert die Textauswahl:

<label class="unselectable">Unselectable label</label>
Nach dem Login kopieren

Für eine breitere Browserkompatibilität kann ein JavaScript-Fallback in Betracht gezogen werden:

<label onselectstart="return false;">Unselectable label</label>
Nach dem Login kopieren

In Fällen, in denen mehrere Labels diese Funktionalität erfordern, kann eine generische JavaScript-Funktion verwendet werden, um die Auswahl zu durchlaufen und zu deaktivieren:

var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
    disableSelection(labels[i]);
}
 
function disableSelection(element) {
    if (typeof element.onselectstart != 'undefined') {
        element.onselectstart = function() { return false; };
    } else if (typeof element.style.MozUserSelect != 'undefined') {
        element.style.MozUserSelect = 'none';
    } else {
        element.onmousedown = function() { return false; };
    }
}
Nach dem Login kopieren

Alternativ kann bei integrierter jQuery eine „disableSelection() "-Funktion kann hinzugefügt werden, um den Prozess zu vereinfachen:

<label>Try to select this</label>

<script>
    $.fn.extend({ 
        disableSelection: function() { 
            this.each(function() { 
                if (typeof this.onselectstart != 'undefined') {
                    this.onselectstart = function() { return false; };
                } else if (typeof this.style.MozUserSelect != 'undefined') {
                    this.style.MozUserSelect = 'none';
                } else {
                    this.onmousedown = function() { return false; };
                }
            }); 
        } 
    });

    $(document).ready(function() {
        $('label').disableSelection();            
    });
</script>
Nach dem Login kopieren

Diese Methoden deaktivieren effektiv die Textauswahl und verhindern so, dass der Benutzer versehentlich eine Auswahl trifft und die Funktionalität der Webseite stört.

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die Textauswahl in HTML?. 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