Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menghalang Pemilihan Teks pada Halaman HTML Saya?

Bagaimanakah Saya Boleh Menghalang Pemilihan Teks pada Halaman HTML Saya?

Patricia Arquette
Lepaskan: 2024-12-29 13:20:10
asal
508 orang telah melayarinya

How Can I Prevent Text Selection on My HTML Pages?

Mencegah Pemilihan Teks pada Halaman HTML

Soalan:

Untuk meningkatkan UI sesuatu Halaman HTML, bagaimana elemen teks, seperti nama tab, boleh dibuat tidak boleh dipilih untuk mengelakkan tidak disengajakan menyerlahkan?

Penyelesaian CSS/HTML:

Merentasi kebanyakan penyemak imbas, CSS berikut boleh digunakan:

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   -ms-user-select: none;
   user-select: none;
}
Salin selepas log masuk

Untuk elemen yang tidak warisi harta ini, seperti dalam IE < 10 dan Opera, atribut yang tidak boleh dipilih boleh ditambah terus kepada elemen yang dikehendaki:

<div>
Salin selepas log masuk

Penyelesaian JavaScript:

Sebagai alternatif rekursif untuk menambah atribut yang tidak boleh dipilih secara manual untuk setiap elemen dalam bekas, JavaScript boleh digunakan:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Pemilihan Teks pada Halaman HTML Saya?. 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