js 点击复制到剪贴板|极客笔记

js 点击复制到剪贴板

在网页开发中，经常会遇到需要用户点击按钮或链接后将特定内容复制到剪贴板的需求。这种功能在一些网站或应用中经常会见到，比如分享链接、复制优惠码等。本文将详细介绍如何利用JavaScript实现点击复制到剪贴板的功能。

一、实现思路

要实现点击复制到剪贴板的功能，可以通过以下步骤来完成：

创建一个可点击的按钮或链接，当用户点击时触发对应的复制操作；
获取需要复制的内容，可以是文本、链接、图片等；
利用JavaScript中的document.execCommand()方法将内容复制到剪贴板；
添加对复制操作是否成功的用户提示，提高用户体验。

二、代码实现

下面是一个简单的示例代码，演示如何实现点击复制文本到剪贴板的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击复制到剪贴板</title>
</head>
<body>

<!-- 点击复制按钮 -->
<button id="copy-btn">点击复制</button>

<!-- 需要复制的文本内容 -->
<input type="text" value="Hello, World!" id="copy-text" style="display: none;">

<script>
// 获取复制按钮和需要复制的文本内容
const copyBtn = document.getElementById('copy-btn');
const copyText = document.getElementById('copy-text');

// 点击复制按钮时触发复制操作
copyBtn.addEventListener('click', function() {
    // 选中需要复制的文本
    copyText.select();
    copyText.setSelectionRange(0, copyText.value.length);

    // 执行复制操作
    document.execCommand('copy');

    // 用户提示
    alert('文本已成功复制到剪贴板！');
});
</script>

</body>
</html>