本 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()
});

...