Wie verhindert man die Textauswahl in HTML-Etiketten?

So verhindern Sie effektiv die Textauswahl in HTML

Beim Erstellen einer Webseite müssen Sie möglicherweise Beschriftungen hinzufügen, die standardmäßig nicht auswählbar sind. Dies kann besonders nützlich für Schaltflächen oder Navigationselemente sein, bei denen der Text nicht kopiert oder hervorgehoben werden soll.

CSS-basierte Lösung (moderne Browser)

Für moderne Browser, die CSS3 unterstützen können Sie die folgenden Stile verwenden:

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

Wenden Sie diese Klasse auf das Label-Element an:

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

JavaScript-Fallback (ältere Browser)

Für ältere Browser Wenn Ihnen die CSS3-Unterstützung fehlt, können Sie JavaScript verwenden, um die Textauswahl zu deaktivieren:

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

disableSelection(document.querySelector("label"));

Diese JavaScript-Funktion durchläuft alle Beschriftungen auf der Seite und wendet die entsprechenden Ereignishandler an, um die Auswahl zu deaktivieren.

jQuery-Lösung

Wenn Sie jQuery verwenden, können Sie die jQuery-Bibliothek mit dem folgenden Code erweitern:

$.fn.disableSelection = function() { 
    this.each(function() {  
        disableSelection(this);
    }); 
};

Dann können Sie die Auswahl für alle Beschriftungen wie folgt deaktivieren:

$("label").disableSelection();

Das obige ist der detaillierte Inhalt vonWie verhindert man die Textauswahl in HTML-Etiketten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!