JavaScript實現(xiàn)一鍵復(fù)制內(nèi)容剪貼板

更新時間：2022年07月22日 14:45:51 作者：TANKING

這篇文章主要為大家介紹了JavaScript實現(xiàn)一鍵復(fù)制內(nèi)容，document.execCommand原生JS設(shè)置剪貼板的實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

有時候為了方便用戶快速復(fù)制頁面的內(nèi)容，一般的做法就是添加一個按鈕給用戶點擊一下就復(fù)制下來了，這邊使用JavaScript原生的方法進(jìn)行設(shè)置剪貼板。

代碼

copy.html

<!DOCTYPE html>
<html>
<head>
    <title>一鍵復(fù)制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>一鍵復(fù)制demo</h2>
<div id="neirong">這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容</div>
<button id="copy">復(fù)制</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("復(fù)制成功");
}

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

實現(xiàn)效果

以上就是JavaScript實現(xiàn)一鍵復(fù)制內(nèi)容剪切板的詳細(xì)內(nèi)容，更多關(guān)于JavaScript一鍵復(fù)制內(nèi)容的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

微信小程序動態(tài)綁定事件并實現(xiàn)事件修改樣式
這篇文章主要介紹了微信小程序動態(tài)綁定事件并實現(xiàn)事件修改樣式的相關(guān)資料,需要的朋友可以參考下
2017-04-04
JS作用域作用鏈及this使用原理詳解
這篇文章主要為大家介紹了JS作用域作用鏈及this使用原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
JSON與JS對象的區(qū)別與對比
JSON是什么？JSON是JS的一種簡單數(shù)據(jù)格式,JSON是JavaScript原生格式，它是一種嚴(yán)格的js對象的格式，JSON的屬性名必須有雙引號，如果值是字符串，也必須是雙引號
2017-03-03
微信小程序 video組件詳解
這篇文章主要介紹了微信小程序 video組件詳解的相關(guān)資料,需要的朋友可以參考下
2016-10-10
以JS開發(fā)為例詳解版本號的作用與價值
這篇文章主要為大家介紹了以JS開發(fā)為例詳解版本號的作用與價值詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
JavaScript?對象管家?Proxy
這篇文章主要為大家介紹了JavaScript對象管家Proxy使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
這篇文章主要為大家介紹了JS實現(xiàn)羊了個羊小游戲示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09