基于 JavaScript 实现复制文本到剪贴板按钮

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

...


模板目录结构如下: