Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencegah Pemilihan Teks dalam Label HTML?
Apabila membuat halaman web, anda mungkin menghadapi keperluan untuk menambah label yang tidak boleh dipilih secara lalai. Ini amat berguna untuk butang atau elemen navigasi yang anda tidak mahu teks disalin atau diserlahkan.
Untuk penyemak imbas moden yang menyokong CSS3 , anda boleh menggunakan gaya berikut:
.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
Gunakan kelas ini pada label elemen:
<label class="unselectable">Unselectable Label</label>
Untuk penyemak imbas lama yang tidak mempunyai sokongan CSS3, anda boleh menggunakan JavaScript untuk melumpuhkan pemilihan teks:
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"));
Ini Fungsi JavaScript berulang melalui semua label pada halaman dan menggunakan pengendali acara yang sesuai untuk melumpuhkan pemilihan.
Jika anda menggunakan jQuery, anda boleh melanjutkan perpustakaan jQuery dengan kod berikut:
$.fn.disableSelection = function() { this.each(function() { disableSelection(this); }); };
Kemudian, anda boleh melumpuhkan pemilihan pada semua label seperti itu:
$("label").disableSelection();
Atas ialah kandungan terperinci Bagaimana untuk Mencegah Pemilihan Teks dalam Label HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!