Bagaimana untuk Mencegah Pemilihan Teks dalam Label HTML?

Cara Mencegah Pemilihan Teks dengan Berkesan dalam 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.

Penyelesaian Berasaskan CSS (Pelayar Moden)

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>

JavaScript Fallback (Pelayar Lama)

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.

jQuery Penyelesaian

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!