Bagaimana untuk melaksanakan fungsi mengklik butang untuk menyalin teks dalam JavaScript?-tutorial js-php.cn

Bagaimana untuk melaksanakan fungsi mengklik butang untuk menyalin teks dalam JavaScript?

WBOY

Lepaskan： 2023-10-20 18:31:41

asal

1712 orang telah melayarinya

JavaScript 如何实现点击按钮复制文本功能？

JavaScript Bagaimana untuk melaksanakan fungsi mengklik butang untuk menyalin teks?

Dalam aplikasi rangkaian moden, kita sering menghadapi situasi di mana kita perlu menyalin teks, seperti menyalin perkongsian pautan, menyalin kod diskaun, dsb. JavaScript menyediakan cara yang mudah dan berkuasa untuk mencapai fungsi ini, iaitu, dengan mendengar peristiwa klik butang dan memanggil API papan keratan yang disediakan oleh penyemak imbas untuk menyalin teks.

Pertama, kami memerlukan fail HTML untuk melaksanakan butang dan kotak teks. Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>点击按钮复制文本</title>
</head>
<body>
    <input type="text" id="textToCopy" value="待复制的文本">
    <button id="copyButton">复制文本</button>
    <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mencipta kotak teks dan butang, dan menetapkan ID untuk setiap daripada mereka untuk operasi seterusnya.

Seterusnya, kita perlu menulis kod logik untuk menyalin teks dalam fail JavaScript. Cipta fail script.js dan tambahkan kod berikut: script.js文件，并添加以下代码：

window.onload = function() {
    var copyButton = document.getElementById("copyButton");
    copyButton.addEventListener("click", function() {
        var textToCopy = document.getElementById("textToCopy");
        textToCopy.select();
        document.execCommand("copy");
        alert("已复制文本：" + textToCopy.value);
    });
};

Salin selepas log masuk

在上面的代码中，我们通过getElementById方法分别获取了按钮和文本框的引用，然后使用addEventListener方法监听按钮的点击事件。在点击事件的回调函数中，我们首先通过getElementById方法获取了待复制文本的引用，然后调用其中的select方法将文本框的文本内容选中，接着使用document.execCommand("copy")命令来执行复制操作，最后弹出一个提示框显示已复制的文本。

为了确保页面加载完成后再执行JavaScript代码，我们使用了上面代码中的window.onloadrrreee

Dalam kod di atas, kami memperoleh rujukan kepada butang dan kotak teks melalui kaedah getElementById, dan kemudian Gunakan kaedah addEventListener untuk mendengar acara klik butang. Dalam fungsi panggil balik acara klik, kami mula-mula mendapatkan rujukan kepada teks untuk disalin melalui kaedah getElementById dan kemudian panggil kaedah select untuk memilih kandungan teks daripada kotak teks, dan kemudian Gunakan perintah document.execCommand("copy") untuk melaksanakan operasi salin, dan akhirnya kotak gesaan akan muncul untuk memaparkan teks yang disalin.

Untuk memastikan kod JavaScript dilaksanakan selepas halaman dimuatkan, kami menggunakan kaedah window.onload dalam kod di atas. Dengan cara ini, apabila halaman dimuatkan, kod JavaScript akan dilaksanakan.

Kini, kita boleh membuka fail HTML dalam penyemak imbas dan cuba klik butang dan kemudian tampalkannya di tempat lain untuk melihat bahawa teks yang disalin berjaya dihantar. 🎜🎜Di atas ialah contoh kod khusus menggunakan JavaScript untuk melaksanakan fungsi mengklik butang untuk menyalin teks. Dengan mendengar peristiwa klik butang, memilih kotak teks dan memanggil API papan keratan yang disediakan oleh penyemak imbas, kami boleh melaksanakan fungsi penyalinan teks dengan mudah, membolehkan pengguna berkongsi dan menyalin kandungan dengan lebih mudah. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi mengklik butang untuk menyalin teks dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!