Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menghalang Teks HTML daripada Boleh Dipilih?
Bagaimana untuk Menghalang Teks HTML daripada Boleh Dipilih?
- Linda Hamiltonasal
- 2024-11-10 09:49:02599semak imbas
Cara Mencegah Teks HTML Daripada Boleh Dipilih
Jika anda ingin membenamkan teks dalam halaman web anda sebagai label dan melumpuhkan kebolehpilihannya, halang kursor tetikus daripada berubah menjadi kursor pemilihan teks apabila melayang di atas teks.
Penyelesaian CSS3:
Jika menyasarkan penyemak imbas moden, gunakan 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:
Untuk pelayar lama, kaedah sandaran JavaScript boleh digunakan:
<!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 Solution:
Jika jQuery digunakan, lanjutkan fungsinya dengan kod berikut:
<!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>Atas ialah kandungan terperinci Bagaimana untuk Menghalang Teks HTML daripada Boleh Dipilih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!