Bagaimana untuk Melumpuhkan Pemilihan Teks dalam HTML?

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:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Mengintegrasikan gaya ini ke dalam elemen HTML melumpuhkan pemilihan teks:

<label class="unselectable">Unselectable label</label>

Untuk keserasian penyemak imbas yang lebih luas, sandaran JavaScript boleh dipertimbangkan:

<label onselectstart="return false;">Unselectable label</label>

Dalam kes di mana berbilang label memerlukan fungsi ini, fungsi JavaScript generik boleh digunakan untuk melelakan dan melumpuhkan pemilihan:

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

Sebagai alternatif, dengan jQuery bersepadu, "disableSelection() Fungsi " boleh ditambah untuk memudahkan proses:

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

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!