【原创】js实现复制到剪贴板,兼容所有浏览器,支持移动端ios复制

今天做一个html复制剪贴板功能，只记得以前做过这个功能，用的是独立的js库Zero Clipboard，由于现在浏览器的更新，以及用户体验的提升，flash已经不再实用，而这种复制功能必须要有flash的支持，果断找其它的替换方案

clipboard.js就能实现纯html的复制

取代flash复制到剪切板，更好页面性能，不会造成卡顿想象，不止兼容PC端，还优雅的兼容移动端ios的safari浏览器，类似于下面的这种效果：

官方文档及下载地址：https://clipboardjs.com/

浏览器兼容

简单使用说明

1、在你的要做复制功能的页面引入核心js文件clipboard.js或clipboard.min.js

<script type="text/javascript" src="script/clipboard.min.js"></script>

2、绑定要操作的元素

<script>

  var clipboard = new ClipboardJS('.copy', {

  text: function() {

  return '复制的文档'; // 这里返回的是要复制的文字 你可以写死，也可以去获取,例如 $(".text").val();

  }

  });

clipboard.on('success', function(e) {

  layer.msg("复制成功");

  });
clipboard.on('error', function(e) {

  layer.msg("复制失败");

  });

  </script>

其中copy就是对应的class=“copy”元素

其它功能

1、复制元素结点内容

  <div id="btn" data-clipboard-text="1">

  <span>Copy</span>

  </div>


  <script>

  var btn = document.getElementById('btn');

  var clipboard = new ClipboardJS(btn);
clipboard.on('success', function(e) {

  console.log(e);

  });
clipboard.on('error', function(e) {

  console.log(e);

  });

  </script>

2、多个元素同时绑定

<!-- 1. Define some markup -->

  <button class="btn" data-clipboard-text="1">Copy</button>

  <button class="btn" data-clipboard-text="2">Copy</button>

  <button class="btn" data-clipboard-text="3">Copy</button>

<!-- 2. Include library -->

  <script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard by passing a string selector -->

  <script>

  var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {

  console.log(e);

  });
clipboard.on('error', function(e) {

  console.log(e);

  });

  </script>

3、指定要复制的元素

<!-- 1. Define some markup -->

  <button class="btn">Copy</button>

  <div>hello</div>

<!-- 2. Include library -->

  <script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->

  <script>

  var clipboard = new ClipboardJS('.btn', {

  target: function() {

  return document.querySelector('div');

  }

  });
clipboard.on('success', function(e) {

  console.log(e);

  });
clipboard.on('error', function(e) {

  console.log(e);

  });

  </script>

还可以通过属性绑定到元素

还可轻松绑定到各种元素,例如input、textarea等

文件来源：https://www.tpframe.com/posts/93.html 原创文件，转载请注明出处