本 JavaScript 代码片段可创建复制到剪贴板按钮，是基于 JS 底层函数实现的，将文本临时保存到剪贴板，该插件带有一个交互式复制按钮，同时支持响应基础的错误提示，如果用户的浏览器不支持复制到剪贴板功能会给与提醒，此外，当用户成功将文本复制到剪贴板时，还会收到 "已复制 "文本的通知，您可以将此复制按钮与段落、文本区域和其他包含文本的 HTML 元素集成，让用户可以将特定文本保存到剪贴板，极大地方便用户复制关键文本。
如何创建 JavaScript 复制到粘贴板按钮
1. 首先，创建带有 "data-copy-text "属性的 p 元素或文本区域，并将文本放入其中（index.html）。
<div class="container"> <div class="wrap"> <div class="box"> <p data-copy-text="">文本区域</p> </div> <div class="box"> <p data-copy-text="">文本区域</p> </div> </div> </div>
2、然后，为复制到剪贴板按钮添加类似以下 CSS 样式（style.css）。 如果需要，你也可以定义自己的样式。
[data-copy-text] + i.material-icons {
transition: all 0.25s ease-in-out;
position: absolute;
top: 0;
right: 0;
background-color: #f5f5f4;
padding: 0.3125rem 0.625rem;
color: #000;
border-color: #607d8b;
border-style: solid;
border-top-right-radius: 0.1875rem;
border-bottom-width: 0.0625rem;
border-left-width: 0.0625rem;
opacity: 0.3;
cursor: pointer;
z-index: 1;
}
[data-copy-text] + i.material-icons:hover,
[data-copy-text] + i.material-icons.active {
background-color: #607d8b;
opacity: 1;
color: #fff;
}
...3. 最后，添加类似以下 JavaScript 代码（script.js），完成。
'use strict';
document.addEventListener('DOMContentLoaded', function() {
copyText.init()
});
...
