Wie deaktiviere ich die Textauswahl 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;
}

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

<label class="unselectable">Unselectable label</label>

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

<label onselectstart="return false;">Unselectable label</label>

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; };
    }
}

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>

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!