
Teks HTML Tidak Boleh Pilih: Melampaui HTML Vanila
Walaupun HTML biasa sahaja tidak dapat menghalang pemilihan teks, pelbagai teknik boleh digunakan untuk mengatasi had ini. Satu kaedah sedemikian melibatkan memanfaatkan CSS3:
1 2 3 4 5 6 7 8 | .unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
|
Salin selepas log masuk
Mengintegrasikan gaya ini ke dalam elemen HTML melumpuhkan pemilihan teks:
1 | <label class = "unselectable" >Unselectable label</label>
|
Salin selepas log masuk
Untuk keserasian penyemak imbas yang lebih luas, sandaran JavaScript boleh dipertimbangkan:
1 | <label onselectstart= "return false;" >Unselectable label</label>
|
Salin selepas log masuk
Dalam kes di mana berbilang label memerlukan fungsi ini, fungsi JavaScript generik boleh digunakan untuk melelakan dan melumpuhkan pemilihan:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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; };
}
}
|
Salin selepas log masuk
Sebagai alternatif, dengan jQuery bersepadu, "disableSelection() Fungsi " boleh ditambah untuk memudahkan proses:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <label>Try to select this</label>
<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>
|
Salin selepas log masuk
Kaedah ini melumpuhkan pemilihan teks secara berkesan, menghalang pengguna daripada memilih dan mengganggu kefungsian halaman web secara tidak sengaja.
Atas ialah kandungan terperinci Bagaimana untuk Melumpuhkan Pemilihan Teks dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!