教你JavaScript實現一鍵複製內容剪貼簿

有時候為了方便使用者快速複製頁面的內容，一般的做法就是新增一個按鈕給使用者點選一下就複製下來了，這邊使用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>

以上就是JavaScript實現一鍵複製內容剪下板的詳細內容。