本文档介绍了如何通过 JavaScript 实现点击按钮将对应文本复制到剪贴板的功能。通过隐藏的 input 元素存储文本，并利用 navigator.clipboard.writeText() 方法将文本写入剪贴板，简化了复制过程，提升了用户体验。本文将提供详细的代码示例和步骤说明，帮助开发者快速实现此功能。
实现原理
核心思路是利用隐藏的 元素存储需要复制的文本，然后通过 JavaScript 函数获取该元素的值，并使用 navigator.clipboard.writeText() 方法将其写入剪贴板。 按钮的 onclick 事件触发该函数，从而实现点击按钮复制文本的功能。
代码实现
以下是完整的 HTML 和 JavaScript 代码示例：
<!DOCTYPE html>
<html>
<head>
<title>复制到剪贴板</title>
</head>
<body>
<div style="display: none;">
<input type="text" value="Text for Button 1" id="button1">
<input type="text" value="Different Text for Button 2" id="button2">
<input type="text" value="Different Text for each Button" id="button3">
</div>
<button onclick="copyToClipboard('button1')">复制文本 1</button>
<button onclick="copyToClipboard('button2')">复制文本 2</button>
<button onclick="copyToClipboard('button3')">复制文本 3</button>
<script>
function copyToClipboard(id) {
const copyText = document.getElementById(id);
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(copyText.value)
.then(() => {
console.log('Text copied to clipboard');
})
.catch(err => {
console.error('Failed to copy text: ', err);
});
}
</script>
</body>
</html>代码解释：
-
HTML 结构:
