Heim > Web-Frontend > CSS-Tutorial > Wie kann man Text in HTML nicht auswählbar machen?

Wie kann man Text in HTML nicht auswählbar machen?

DDD
Freigeben: 2024-11-10 01:25:02
Original
407 Leute haben es durchsucht

How to Make Text Unselectable in HTML?

Wie man nicht auswählbaren HTML-Text rendert: Eine detaillierte Erklärung

Es stellt sich die Frage: Wie kann man Text auf einer Webseite nicht auswählbar machen und so den Cursor verhindern? vom Wechsel zu einem Textauswahl-Cursor beim Bewegen des Mauszeigers. Dieses Verhalten wird typischerweise bei Schaltflächen beobachtet, wie sie beispielsweise auf der Stack Overflow-Website zu finden sind.

CSS3-Lösung

Für moderne Browser reicht eine CSS3-Lösung aus:

.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

Um diesen Stil anzuwenden, fügen Sie der Bezeichnung die nicht auswählbare Klasse hinzu Element:

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

JavaScript Fallback

Für ältere Browser ist ein JavaScript-Fallback notwendig:

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

window.onload = function() {
    var labels = document.getElementsByTagName('label');
    for (var i = 0; i < labels.length; i++) {
        disableSelection(labels[i]);
    }
};
Nach dem Login kopieren

jQuery Solution

Wenn jQuery verwendet wird, erweitern Sie die Funktion „disableSelection()“ Funktion:

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

Dann wenden Sie es auf Beschriftungselemente an:

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

Das obige ist der detaillierte Inhalt vonWie kann man Text in HTML nicht auswählbar machen?. 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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage