Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Lumpuhkan Pemilihan Teks dalam UI HTML Saya?

Bagaimanakah Saya Boleh Lumpuhkan Pemilihan Teks dalam UI HTML Saya?

Linda Hamilton
Lepaskan: 2024-12-09 12:14:10
asal
444 orang telah melayarinya

How Can I Disable Text Selection in My HTML UI?

Lumpuhkan Pemilihan Teks untuk Pengalaman UI Dipertingkat

Apabila mereka bentuk antara muka pengguna HTML, beberapa elemen teks, seperti nama tab, boleh kelihatan tidak diingini apabila dipilih . Untuk mengelakkan ini, pertimbangkan untuk melaksanakan salah satu kaedah berikut.

Penyelesaian CSS

Bagi kebanyakan penyemak imbas, gaya CSS berikut boleh menjadikan teks tidak boleh dipilih:

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

Atribut HTML untuk IE dan Opera

Untuk pelayar seperti IE (di bawah versi 10) dan Opera, gunakan atribut yang tidak boleh dipilih:

<div>
Salin selepas log masuk

JavaScript Recursion untuk Kawasan Tidak Boleh Dipilih yang Luas

Untuk kes yang melibatkan sarang, gunakan JavaScript untuk menetapkan atribut tidak boleh dipilih secara rekursif:

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 Lumpuhkan Pemilihan Teks dalam UI 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