javascript tidak boleh menyalin-Soal Jawab bahagian hadapan-php.cn

javascript tidak boleh menyalin

WBOY

Lepaskan： 2023-05-12 11:49:06

asal

982 orang telah melayarinya

JavaScript ialah bahasa skrip yang digunakan secara meluas dalam pembangunan web Ia boleh menyelesaikan satu siri tugasan seperti interaksi dinamik halaman web, pengesahan data, operasi borang, dll. Walau bagaimanapun, apabila menggunakan JavaScript, kadangkala kami menghadapi masalah biasa: kandungan teks tidak boleh disalin. Dalam artikel ini, kami akan menyelidiki punca masalah ini dan menyediakan beberapa penyelesaian supaya anda boleh menangani isu penyalinan teks dengan lebih lancar dalam pembangunan anda.

Mengapa JavaScript tidak boleh menyalin teks?

Pertama, kita perlu memahami sebab JavaScript tidak boleh menyalin kandungan teks. Malah, punca paling biasa masalah ini datang daripada mekanisme keselamatan pelayar moden. Apabila pengguna cuba menyalin kandungan teks melalui kod JavaScript, penyemak imbas secara automatik akan memintas operasi untuk melindungi keselamatan sistem pengguna. Ini kerana jika kod JavaScript boleh mengakses kandungan papan keratan pengguna, maka sesiapa sahaja boleh menulis kod hasad dan mengakses maklumat sensitif pengguna, seperti kata laluan, maklumat kad kredit, dsb. Oleh itu, penyemak imbas sering menghalang JavaScript daripada membaca atau menulis teks daripada papan keratan.

Penyelesaian

Walaupun mekanisme keselamatan penyemak imbas moden menjadikannya lebih sukar untuk menyalin teks dengan JavaScript, ia bukanlah mustahil sepenuhnya. Di bawah, kami akan menyediakan beberapa penyelesaian untuk menyelesaikan masalah ini.

Menggunakan kaedah document.execCommand()

Kaedah document.execCommand() ialah kaedah JavaScript yang boleh melaksanakan beberapa arahan pengguna. Ia boleh mengendalikan antara muka pengguna dan berinteraksi dengan sistem, salah satunya ialah operasi salin. Kaedah ini perlu dipanggil semasa tindakan yang dimulakan pengguna, seperti mengklik butang atau menggunakan kekunci pintasan. Berikut ialah kod sampel:

function copyToClipboard(id) {
  var text = document.getElementById(id).innerText;
  var textarea = document.createElement("textarea");
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
}

Salin selepas log masuk

Dalam kod di atas, kami mentakrifkan fungsi copyToClipboard() yang menerima id parameter, yang mewakili id elemen teks yang akan disalin. Logik fungsi ini adalah seperti berikut:

Pertama, kami menggunakan atribut innerText untuk mendapatkan kandungan teks daripada elemen yang ditentukan.
Kemudian, kami mencipta elemen textarea menggunakan kaedah createElement() dan menetapkan kandungan teks kepada atribut nilainya.
Seterusnya, kami menambah elemen textarea pada dokumen (sebelum teg terakhir).
Kemudian, kami menggunakan kaedah pilih() untuk memilih kandungan teks dalam elemen textarea.
Akhir sekali, kami memanggil kaedah document.execCommand() untuk melaksanakan operasi salin.
Menggunakan pustaka clipboard.js

clipboard.js ialah pustaka JavaScript yang boleh membantu kami melaksanakan operasi penyalinan teks dengan mudah Pustaka ini tidak memerlukan memanggil kaedah document.execCommand(). . Pustaka clipboard.js adalah berdasarkan API penyemak imbas yang dibenarkan dan bukannya menyalin dan menampal acara. Dengan perpustakaan ini, kami boleh melaksanakan fungsi teks salinan mudah dengan menulis sejumlah kecil kod JavaScript. Berikut ialah kod sampel menggunakan pustaka clipboard.js:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Clipboard.js Sample</title>
  <!-- 引入clipboard.js库 -->
  <script src="clipboard.js"></script>
  <style type="text/css">
    div {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="copy-btn" data-clipboard-text="Hello, world!">
    Click me!
  </div>

  <script>
    // 初始化clipboard.js库
    new ClipboardJS('.copy-btn');
  </script>
</body>
</html>

Salin selepas log masuk

Dalam kod sampel di atas, kami mula-mula memperkenalkan pustaka clipboard.js, dan kemudian mentakrifkan elemen div dengan atribut data-clipboard-text. Sifat ini digunakan untuk menyimpan kandungan teks yang akan disalin. Akhir sekali, dalam teg kami memulakan pustaka clipboard.js dan menggunakan kelas copy-btn pada elemen yang kami tentukan untuk melaksanakan operasi salinan.

Gunakan teknologi Flash atau Silverlight

Jika apl anda ditulis 10 tahun yang lalu, anda mungkin ingin mempertimbangkan untuk menggunakan teknologi Flash atau Silverlight untuk penyalinan teks. Walaupun pendekatan ini tidak disyorkan, ia mungkin satu-satunya penyelesaian yang boleh dilaksanakan dalam beberapa kes. Kelebihan utama menggunakan teknologi Flash atau Silverlight ialah ia menjalankan penyemak imbas silang dan tidak tertakluk kepada sekatan keselamatan pelayar moden. Berikut ialah contoh kod menggunakan teknologi Flash:

function copyToClipboard(text) {
    var flashcopier = 'flashcopier';
    if (!document.getElementById(flashcopier)) {
        var divholder = document.createElement('div');
        divholder.id = flashcopier;
        document.body.appendChild(divholder);
    }

    document.getElementById(flashcopier).innerHTML = '';
    var divinfo = '<embed src="flashcopier.swf" FlashVars="clipboard='+encodeURIComponent(text)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashcopier).innerHTML = divinfo;
}

Salin selepas log masuk

Dalam kod sampel di atas, kami mentakrifkan fungsi copyToClipboard(), yang menerima teks parameter, yang mewakili kandungan teks yang akan disalin. Fungsi ini menggunakan teknologi Flash untuk menyalin teks ke papan keratan.

Ringkasan

Penyalinan teks dalam JavaScript sentiasa menjadi masalah yang mencabar, tetapi nasib baik kami mempunyai banyak penyelesaian untuk dipilih. Artikel ini memperkenalkan beberapa penyelesaian ini, seperti menggunakan kaedah document.execCommand(), pustaka clipboard.js, teknologi Flash atau Silverlight. Walaupun kaedah ini tidak sempurna, ia berguna dalam senario yang berbeza dan boleh membantu kami menangani masalah penyalinan teks. Sudah tentu, terdapat banyak cara lain untuk melaksanakan penyalinan teks dalam JavaScript, dan anda perlu memilih berdasarkan situasi tertentu.

Atas ialah kandungan terperinci javascript tidak boleh menyalin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!