「点击即复制！」——超实用 JavaScript 实现技巧

大家好，欢迎来到IT知识分享网。

在 JavaScript 中，点击文本复制是一个常见且有用的需求，尤其在用户体验和快捷操作中广泛应用。下面介绍几种不同的实现方法。

方法 1：使用 document.execCommand(‘copy’)

原理：document.execCommand() 是一种旧式方法，用于在文档上执行特定命令。在支持的浏览器中，execCommand(‘copy’) 可以将选中的内容复制到剪贴板。

步骤：

1、创建一个隐藏的文本区域 <textarea> 元素，将需要复制的内容设置为 <textarea> 的值。

2、通过 JS 选择并聚焦 <textarea>，执行 document.execCommand(‘copy’) 命令，删除文本区域元素。

举个 🌰

<div id="copyText" style="cursor: pointer">点击复制这段文本</div> <script> function copyToClipboard(text) { const textarea = document.createElement('textarea'); textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); alert('文本已复制！'); } const copyElement = document.getElementById('copyText'); copyElement.addEventListener('click', () => { copyToClipboard(copyElement.innerHTML); }); </script>

注意点：这是较旧的方法，在一些现代浏览器中逐渐被替代。某些浏览器可能会有安全性限制，使用时需要兼容性处理。

展示为：

方法 2：使用现代的 Clipboard API

原理：Clipboard API 是一个更现代、异步的 API，它允许更简单和更安全的剪贴板操作。使用 navigator.clipboard.writeText() 方法可以将文本复制到剪贴板。

步骤：

1、使用 navigator.clipboard.writeText() 方法，传入需要复制的文本。

2、该方法是异步的，返回一个 Promise，可以用来处理成功或失败的回调。

举个 🌰

<div id="copyText" style="cursor: pointer">点击复制这段文本</div> <script> function copyToClipboard(text) { navigator.clipboard .writeText(text) .then(() => alert('复制成功！')) .catch((err) => alert('复制失败！')); } const copyElement = document.getElementById('copyText'); copyElement.addEventListener('click', () => { copyToClipboard(copyElement.innerHTML); }); </script>

优点：更现代化，支持异步操作；更加安全和可靠，符合浏览器的权限管理。

注意点：需要 HTTPS 环境；某些旧版本浏览器不支持 Clipboard API。

展示内容如方法 1。

方法 3：使用 window.getSelection() + document.execCommand(‘copy’)

原理：使用 window.getSelection() 方法选中 DOM 元素内容，再结合 document.execCommand(‘copy’) 复制选中的内容到剪贴板。

步骤：

1、选择一个 DOM 元素的文本内容。使用 window.getSelection() 选中内容。

2、执行 document.execCommand(‘copy’) 复制选中的文本。

举个 🌰

<div id="copyText" style="cursor: pointer">点击复制这段文本</div> <script> function copyElementText(id) { const element = document.getElementById(id); const range = document.createRange(); range.selectNode(element); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand('copy'); window.getSelection().removeAllRanges(); alert('文本已复制'); } document.getElementById('copyText').addEventListener('click', () => { copyElementText('copyText'); }); </script>

注意点：适合复制 DOM 元素的可见内容。和 execCommand(‘copy’) 一样，在一些现代浏览器中可能不再推荐。

展示内容如方法 1。

方法 4：使用 input 或 textarea 元素

原理：利用 <input> 或 <textarea> 元素自带的选择和复制功能。可以动态创建一个隐藏的 <input> 或 <textarea>，赋值后选中并复制。

步骤：

1、创建 input 或 textarea 元素，设置需要复制的内容为它的值。

2、使用 select() 方法选中其内容，执行 document.execCommand(‘copy’) 进行复制。

举个  🌰

<div id="copyText" style="cursor: pointer">点击复制这段文本</div> <script> function copyTextUsingInput(text) { const input = document.createElement('input'); input.setAttribute('value', text); document.body.appendChild(input); input.select(); document.execCommand('copy'); document.body.removeChild(input); alert('复制成功！'); } const copyElement = document.getElementById('copyText'); copyElement.addEventListener('click', () => { copyTextUsingInput(copyElement.innerHTML); }); </script>

注意点：使用表单元素很简单，但在现代浏览器中可以替换为 Clipboard API。

展示内容如方法 1。

方法 5：使用 jQuery

如果在项目中使用 jQuery，可以采用下面写法：

举个 🌰

<div id="copyText" style="cursor: pointer">点击复制这段文本</div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $('#copyText').on('click', function () { const content = $(this).text(); navigator.clipboard .writeText(content) .then(() => { alert('内容已复制！'); }) .catch((err) => { console.error('复制失败:', err); }); }); </script>

展示内容如方法 1。

方法 6：为移动设备优化的点击复制

原理：移动设备浏览器的交互方式不同，通常不会显示鼠标悬停效果或右键菜单。因此，需要在点击时直接复制文本内容，尤其是在移动端表单和内容展示场景下。

步骤：

1、使用 Clipboard API 或 input 方法创建点击复制行为。

2、在移动设备上触发点击事件并自动复制内容。

举个 🌰

<div id="copyText" style="cursor: pointer">点击在移动端复制这段文本</div> <script> function copyForMobile(text) { navigator.clipboard .writeText(text) .then(() => alert('移动设备上复制成功')) .catch((err) => console.error('复制失败', err)); } const copyElement = document.getElementById('copyText'); copyElement.addEventListener('touchstart', () => { copyForMobile(copyElement.innerHTML); }); </script>

注意点：针对触屏设备的优化，使用 touchstart 事件来代替传统的 click 事件。

展示为：

方法 7：使用 window.getSelection() 和 document.createRange()

这种方法可以选择文本并复制，适用于复杂的文本结构。

举个 🌰

<div id="copyText" style="cursor: pointer"> <p>点击复制这段内容</p> <div>可能包含多行文本或其他元素。</div> </div> <script> document.getElementById('copyText').addEventListener('click', () => { const range = document.createRange(); range.selectNodeContents(document.getElementById('copyText')); // 选择内容 const selection = window.getSelection(); selection.removeAllRanges(); // 清空之前的选区 selection.addRange(range); // 添加新选区 try { document.execCommand('copy'); // 复制选中的内容 alert('内容已复制！'); } catch (err) { console.error('复制失败:', err); } selection.removeAllRanges(); // 清空选区 }); </script>

方法 8：使用第三方库（如 clipboard.js）

原理：clipboard.js 是一个轻量级的 JavaScript 库，提供了简单的剪贴板操作方法，适用于各种环境。

安装：可以通过 CDN 或 npm 安装。

npm install clipboard --save

举个 🌰

<div id="copyText" style="cursor: pointer" data-clipboard-text="点击复制这段内容">点击复制这段内容</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script> <script> const clipboard = new ClipboardJS('#copyText'); clipboard.on('success', () => { alert('内容已复制！'); }); clipboard.on('error', (e) => { console.error('复制失败:', e); }); </script>

总结：

1、现代方法：推荐使用 Clipboard API，因为它支持异步操作和更安全的剪贴板访问方式。使用 Clipboard API 时，确保是在 HTTPS 环境中运行，否则浏览器可能不允许访问剪贴板。

2、兼容性方法：对于旧版浏览器或兼容需求，可以使用 document.execCommand(‘copy’) 来处理。

3、灵活性：通过不同的选项，可以根据需求选择复制整个元素的内容、文本或表单数据，甚至针对移动设备优化复制操作。

4、用户授权：某些浏览器可能要求用户明确授权才能使用剪贴板功能，尤其是涉及敏感数据时。

隐藏点：

1、处理失败：在复制失败时提供有用的信息，例如网络错误或权限问题，可以帮助用户解决问题。

2、样式变化：可以在复制后改变文本的样式（如变色），以明确告诉用户复制操作已完成。

3、重复点击处理：如果文本内容不变，可以在一段时间内禁用复制功能，以避免用户多次点击。