关于javascript:JavaScript一键复制内容documentexecCommand原生JS设置剪贴板

30次阅读

共计 1136 个字符，预计需要花费 3 分钟才能阅读完成。

有时候为了不便用户疾速复制页面的内容，个别的做法就是增加一个按钮给用户点击一下就复制下来了，这边应用 JavaScript 原生的办法进行设置剪贴板。

copy.html

<!DOCTYPE html>
<html>
<head>
    <title> 一键复制 demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        h2{
            text-align: center;
            margin-top: 20px;
        }
        #neirong{width: calc(90% - 20px);
            padding:10px 10px;
            margin:20px auto;
            background: #eee;
            border-radius: 5px;
        }
        #copy{
            border:none;
            width: 90%;
            height: 45px;
            background: #39f;
            font-size: 16px;
            color: #fff;
            font-weight: bold;
            border-radius: 5px;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
<h2> 一键复制 demo</h2>
<div id="neirong"> 这是内容这是内容这是内容这是内容 </div>
<button id="copy"> 复制 </button>

<script>
function copyArticle(event){const range = document.createRange();
      range.selectNode(document.getElementById('neirong'));
      const selection = window.getSelection();
      if(selection.rangeCount > 0) selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand('copy');
      alert("复制胜利");
}

window.onload = function () {var obt = document.getElementById("copy");
  obt.addEventListener('click', copyArticle, false);
}
</script>
</body>
</html>

TANKING

正文完