Bagaimana untuk Mencegah Pemilihan Teks dalam Label HTML?

Mary-Kate Olsen
Lepaskan: 2024-11-11 12:31:03
asal
714 orang telah melayarinya

How to Prevent Text Selection in HTML Labels?

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;
}
Salin selepas log masuk

Gunakan kelas ini pada label elemen:

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

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"));
Salin selepas log masuk

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);
    }); 
};
Salin selepas log masuk

Kemudian, anda boleh melumpuhkan pemilihan pada semua label seperti itu:

$("label").disableSelection();
Salin selepas log masuk

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!

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