Bagaimana untuk Melumpuhkan Pemilihan Teks dalam HTML?

Mary-Kate Olsen
Lepaskan: 2024-11-10 19:31:03
asal
580 orang telah melayarinya

How to Disable Text Selection in 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;
}
Salin selepas log masuk

Mengintegrasikan gaya ini ke dalam elemen HTML melumpuhkan pemilihan teks:

<label class="unselectable">Unselectable label</label>
Salin selepas log masuk

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

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

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:

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan