js+html5实现复制文字按钮

2019-11-19 16:04:16

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js+html5实现点击复制文字的按钮，供大家参考，具体内容如下

图片展示：

注意css中的样式，有些页面复制不成功就是没有添加那一句造成的。

代码块

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <title>Title</title>  </head>  <style type="text/css">    *{      -webkit-user-select: auto;    }  </style>  <body>    <span id="content">      你好，好久不见！    </span>    <button id="copyBT">复制</button>    <script>      function copyArticle(event) {        const range = document.createRange();        range.selectNode(document.getElementById('content'));        const selection = window.getSelection();        if(selection.rangeCount > 0) selection.removeAllRanges();        selection.addRange(range);        document.execCommand('copy');        alert("复制成功！");      }      document.getElementById('copyBT').addEventListener('click', copyArticle, false);    </script>  </body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：深入理解angular2启动项目步骤

下一篇：js+html5实现页面可刷新的倒计时效果