Bagaimana untuk melarang penyalinan kandungan artikel dalam css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk melarang penyalinan kandungan artikel dalam css

青灯夜游

Lepaskan： 2022-08-12 18:22:31

asal

3593 orang telah melayarinya

Dalam CSS, anda boleh menggunakan atribut pilihan pengguna untuk mencapai kesan melarang penyalinan kandungan artikel. Hanya tambahkan gaya "pilih pengguna: tiada;" pada elemen teks. Atribut pilih pengguna digunakan untuk menetapkan atau mendapatkan semula sama ada pengguna dibenarkan memilih teks Apabila nilai atribut ini ditetapkan kepada "tiada", elemen teks tidak boleh dipilih oleh tetikus, dengan itu menghalang penyalinan teks.

Bagaimana untuk melarang penyalinan kandungan artikel dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Secara amnya, teks boleh salin pada halaman web akan mempunyai kursor berbentuk I berikut

Bagaimana untuk melarang penyalinan kandungan artikel dalam css

Jika anda tidak mahu menyalin teks, tetapkan pilihan pengguna CSS Tujuan boleh dicapai.

Atribut pilihan pengguna menetapkan atau mendapatkan semula sama ada pengguna dibenarkan memilih teks. Nilai lalai pilihan pengguna ialah teks, yang boleh memilih teks.

Dalam penyemak imbas web, jika anda mengklik dua kali pada teks, teks akan dipilih atau diserlahkan. Sifat ini digunakan untuk menghalang tingkah laku ini.

Sintaks:

user-select: auto|none|text|all;

Salin selepas log masuk

值	描述
auto	默认。如果浏览器允许，则可以选择文本。
none	防止文本选取。
text	文本可被用户选取。
all	单击选取文本，而不是双击。

Cuma tambah gaya "user-select:none;" pada elemen teks supaya elemen teks tidak boleh dipilih oleh tetikus untuk melarang penyalinan teks tersebut.

Oleh kerana atribut pilihan pengguna ialah ciri baharu dalam spesifikasi CSS3 dan mempunyai isu keserasian, ia perlu diberi awalan untuk penyemak imbas yang berbeza.

Penyalinan teks yang dilarang:

-moz-user-select:none; /* Firefox私有属性 */

-webkit-user-select:none; /* WebKit内核私有属性 */

-ms-user-select:none; /* IE私有属性(IE10及以后) */

-khtml-user-select:none; /* KHTML内核私有属性 */

-o-user-select:none; /* Opera私有属性 */

user-select:none; /* CSS3属性 */

Salin selepas log masuk

Kesan (kini kursor anak panah ini):

Bagaimana untuk melarang penyalinan kandungan artikel dalam css

Contoh : melarang teks daripada dipilih, melaksanakan fungsi melarang penyalinan teks

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style>
.test{
padding:10px;
-webkit-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
background:#eee;}
</style>
</head>
<body>
<div onselectstart="return false;" unselectable="on">选择我试试，你会发现怎么也选择不到我，哈哈哈哈</div>
</body>
</html>

Salin selepas log masuk

Bagaimana untuk melarang penyalinan kandungan artikel dalam css

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Bagaimana untuk melarang penyalinan kandungan artikel dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!