Heim >Web-Frontend >CSS-Tutorial >Wie kann verhindert werden, dass HTML-Text auswählbar ist?
Wie kann verhindert werden, dass HTML-Text auswählbar ist?
- Linda HamiltonOriginal
- 2024-11-10 09:49:02604Durchsuche
So verhindern Sie, dass HTML-Text auswählbar ist
Wenn Sie Text als Beschriftung in Ihre Webseite einbetten und seine Auswählbarkeit deaktivieren möchten, verhindern Sie dies Der Mauszeiger verwandelt sich nicht in einen Textauswahlcursor, wenn Sie mit der Maus über den Text fahren.
CSS3 Lösung:
Wenn Sie auf moderne Browser abzielen, verwenden Sie 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;
}
<label class="unselectable">Unselectable label</label>
JavaScript-Fallback:
Für ältere Browser: Es kann eine JavaScript-Fallback-Methode eingesetzt werden:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2310734</title>
<script>
window.onload = function() {
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; };
}
}
</script>
</head>
<body>
<label>Try to select this</label>
</body>
</html>
jQuery Lösung:
Wenn jQuery verwendet wird, erweitern Sie dessen Funktionalität mit dem folgenden Code:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2310734 with jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<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>
</head>
<body>
<label>Try to select this</label>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass HTML-Text auswählbar ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!