Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan fungsi salin dan tampal dalam javaScript
Bagaimana untuk melaksanakan fungsi salin dan tampal dalam javaScript
- 藏色散人asal
- 2021-11-18 15:51:413193semak imbas
Cara melaksanakan fungsi salin dan tampal dalam javaScript: 1. Melalui kaedah "document.execCommand('copy')" 2. Melalui ClipboardJS untuk menyalin kandungan.
Persekitaran pengendalian artikel ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.
Bagaimana untuk melaksanakan fungsi salin dan tampal dalam javaScript?
Dua cara untuk melaksanakan salin dan tampal dalam js
1 Prakata
Antara muka memerlukan fungsi salin, jadi saya menulis satu sebagai Rekod mudah
2. Kaedah, cadangkan yang kedua.
1. Kaedah pertama
1), melalui document.execCommand('copy')
2), kod bahagian hadapan adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>constructor-nodelist</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css"/>
</head>
<body>
<button onclick="copyText('copy_file')">点我复制</button>
<a id="copy_file" href="复制内容" ></a>
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
function copyText(str_file) {
const btn = document.querySelector('.'+str_file);
var copy_val = document.getElementById(str_file)
var copy_file = copy_val.getAttribute("href");
btn.addEventListener('click',() => {
const input = document.createElement('input');
document.body.appendChild(input);
input.setAttribute('value', copy_file);
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
swal("复制成功！","success");
}
document.body.removeChild(input);
})
}
</script>
</body>3) Ringkasan: Terutamanya salin href dalam teg a melalui kelas dan id, letakkan kandungan yang disalin ke dalam teg input yang dijana, kemudian alih keluar teg input selepas menyalin Anda boleh menyalin kandungan dan menggunakannya sendiri. dan ubah suai js.
4), masalah: klik pertama tidak berkesan, anda perlu klik dua kali, yang belum diselesaikan
2 Kaedah kedua
1), melalui ClipboardJS Untuk menyalin kandungan, kami mengesyorkan ini
2), alamat git: clipboardjs(https://clipboardjs.com/)
3), kod bahagian hadapan adalah seperti berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 请自行去git项目下载 js-->
<script src="./clipboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css"/>
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>
<button id="btn" data-clipboard-text="str_555" onclick="copyText()">
<span>Copy</span>
</button>
</body>
</html>
<script>
function copyText() {
var btn = document.getElementById('btn');
console.log(btn);
var clipboard = new ClipboardJS(btn);
<!-- var clipboard = new ClipboardJS(btn, {-->
<!-- container: document.getElementById('btn')-->
<!-- });--> 如果你的项目是 bootstrap框架，请使用这个
clipboard.on('success', function(e) {
console.log(e);
swal("复制成功！","success");
clipboard.destroy();
});
clipboard.on('error', function(e) {
console.log(e);
swal("复制失败","error");
clipboard.destroy();
});
}
</script>3) Ringkasan: Sila baca dokumen dengan teliti. Projek ini masih sangat berkuasa dan saya sangat mengesyorkan ini.
4) Masalah: Saya juga menghadapi masalah bahawa salinan pertama tidak berkuat kuasa, yang belum diselesaikan buat masa ini.
3. Ringkasan
1. Kami semua menghadapi masalah bahawa salinan pertama tidak berkuat kuasa, dan kami menggunakan sweetalert untuk menyelesaikan masalah itu kemudian.
2. Saya hanya bereksperimen dengan penyemak imbas Google dan Firefox, dan ia boleh digunakan Jika versi penyemak imbas lain tidak boleh digunakan, sila semak artikel lain dengan sendiri dan pembetulan dialu-alukan.
Kajian yang disyorkan: "Tutorial Asas JavaScript"
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi salin dan tampal dalam javaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!