在本文中，我将向你展示如何使用简单的 JavaScript 代码实现：
1、 在用户操作上向剪贴板添加文本，例如按下按钮。
2、当用户复制内容时修改剪贴板的内容。
将要使用的 API 不需要任何外部库，并且具有很好的浏览器兼容性！
通过点击按钮复制
在网页上，定义一个按钮，可以点击这个个按钮快速复制指定的内容。用户只要鼠标轻轻一点就可以把需要的内容快速复制在粘贴面板，可以让用户有更加舒适的体验。
此交互可应用于快速获取 URL ，长字符串（如 SSH 密钥，终端命令，十六进制颜色或经常复制和粘贴的任何其他数据）。
为了实现这个功能，我们需要使用一个名为 execCommand() 的 JavaScript 方法。它允许我们调用许多操纵可编辑内容的不同事件，例如使文本变为粗体或者斜体、进行撤消或者重做、以及复制、剪切和粘贴。
document.execCommand('copy');
上面这段代码，和在键盘上按 ctrl + c 是一样的。
在 JavaScript 中我们可以通过 Selection API 来获取 HTML 页面中的元素。
现在创建一个小例子：
HTML 代码
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<p id="content-holder">This text will be inserted into the clipboard.</p>
<button id="copy-button">Copy Text</button>
<textarea placeholder="Paste here"></textarea>
</body>
</html>
JS 代码
// 通过 getElementById 方法获取 id 为 copy-button 的 button 标签
var button = document.getElementById("copy-button");
// 通过 getElementById 方法获取 id 为 content-holder 的 p 标签
var contentHolder = document.getElementById("content-holder");
// 监听 button 标签的点击事件,当 button 标签被点击时，触发后面的回调函数
button.addEventListener("click", function() {
// 创建 createRange 方法对象
var range = document.createRange();
// 创建 getSelection 方法对象，表示用户选择的文本范围或光标的当前位置。
var selection = window.getSelection();
// 通过 selection.removeAllRanges() 方法清除选择范围
selection.removeAllRanges();
// selectNodeContents 方法选择 contentHolder 子节点的内容
// 这里指 p 标签中的文本节点内容
range.selectNodeContents(contentHolder);
// 一个区域（Range）对象将被增加到选区（Selection）当中。
// 将刚刚选中的 p 标签文本添加到 selection
selection.addRange(range);
// execCommand 中的 copy 方法拷贝刚刚选到的内容
document.execCommand('copy');
// 重新初始化区域对象 range
selection.removeAllRanges();
}, false);
CSS 代码
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding: 20px;
font: normal 16px sans-serif;
color: #555;
}
p{
margin-bottom: 20px;
}
button{
padding: 8px 12px;
margin-bottom: 20px;
}
textarea {
display: block;
padding: 10px;
width: 400px;
height: 120px;
}
下方动图是功能的演示效果。只要点击复制按钮，就可以复制到上面的格言。不用使用 ctrl + c 和用鼠标选中再右键复制那么麻烦了。
希望分享的内容对大家有帮助，感谢你们的关注与支持。
点个关注，就是一份支持。
网友评论