如何实现JavaScript一键复制功能？
- 内容介绍
- 文章标签
- 相关推荐
本文共计918个文字，预计阅读时间需要4分钟。
原生JavaScript实现点击按钮复制文本，提供参考内容，整体内容如下：
最近遇到一个需求，需要点击按钮复制聊天记录的文本到剪切板。以下是实现方法：
1. HTML结构：
2. CSS样式（可选）：css#copyButton { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;}
3. JavaScript实现：javascriptdocument.getElementById('copyButton').addEventListener('click', function() { const text=document.getElementById('chatRecord').value; navigator.clipboard.writeText(text).then(()=> { alert('复制成功！'); }).catch(err=> { alert('复制失败：' + err); });});
原理分析：- 使用`getElementById`获取按钮和文本区域元素。- 为按钮添加点击事件监听器。- 获取文本区域的内容。- 使用`navigator.clipboard.writeText`将文本写入剪切板。- 成功复制后显示提示信息，失败则显示错误信息。
本文共计918个文字，预计阅读时间需要4分钟。
原生JavaScript实现点击按钮复制文本，提供参考内容，整体内容如下：
最近遇到一个需求，需要点击按钮复制聊天记录的文本到剪切板。以下是实现方法：
1. HTML结构：
2. CSS样式（可选）：css#copyButton { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;}
3. JavaScript实现：javascriptdocument.getElementById('copyButton').addEventListener('click', function() { const text=document.getElementById('chatRecord').value; navigator.clipboard.writeText(text).then(()=> { alert('复制成功！'); }).catch(err=> { alert('复制失败：' + err); });});
原理分析：- 使用`getElementById`获取按钮和文本区域元素。- 为按钮添加点击事件监听器。- 获取文本区域的内容。- 使用`navigator.clipboard.writeText`将文本写入剪切板。- 成功复制后显示提示信息，失败则显示错误信息。