欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年07月22日 14:45:51   作者：TANKING  
這篇文章主要為大家介紹了JavaScript實現(xiàn)一鍵復制內(nèi)容，document.execCommand原生JS設置剪貼板的實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

有時候為了方便用戶快速復制頁面的內(nèi)容，一般的做法就是添加一個按鈕給用戶點擊一下就復制下來了，這邊使用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">這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容</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>

實現(xiàn)效果

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

相關文章

  • JavaScript前端實用的工具函數(shù)封裝

    JavaScript前端實用的工具函數(shù)封裝

    這篇文章主要為大家介紹了JavaScript前端實用的一些工具函數(shù)的封裝，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-07-07
  • javascript數(shù)據(jù)類型之原始類型詳解

    javascript數(shù)據(jù)類型之原始類型詳解

    這篇文章主要為大家介紹了javascript數(shù)據(jù)類型之原始類型詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-06-06
  • JavaScript編程通過Matlab質心算法定位學習

    JavaScript編程通過Matlab質心算法定位學習

    這篇文章主要為大家介紹了JavaScript編程中通過Matlab質心算法來定位的算法學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助
    2021-10-10
  • Javascript使用integrity屬性進行安全驗證

    Javascript使用integrity屬性進行安全驗證

    這篇文章主要介紹了Javascript使用integrity屬性進行安全驗證，在html中，script標簽可以通過src屬性引入一個js文件，引入的js文件可以是本地的，也可以是遠程的，下面我們一起來看看文章詳細內(nèi)容
    2021-11-11
  • JS前端宏任務微任務及Event Loop使用詳解

    JS前端宏任務微任務及Event Loop使用詳解

    這篇文章主要為大家介紹了JS前端宏任務微任務及Event Loop使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-07-07
  • 微信小程序 地圖map詳解及簡單實例

    微信小程序 地圖map詳解及簡單實例

    這篇文章主要介紹了微信小程序 地圖map詳解及簡單實例的相關資料,需要的朋友可以參考下
    2017-01-01
  • js中的函數(shù)嵌套和閉包詳情

    js中的函數(shù)嵌套和閉包詳情

    這篇文章主要介紹了js中的函數(shù)嵌套和閉包，在聊閉包這個問題之前，先了解一下變量的定義域，在js中，變量定義域有全局作用域和局部作用域之說，文章主要介紹函數(shù)的作用域,需要的朋友可以參考一下
    2021-11-11
  • 微信小程序 progress組件詳解及實例代碼

    微信小程序 progress組件詳解及實例代碼

    這篇文章主要介紹了微信小程序 progress組件詳解及實例代碼的相關資料,需要的朋友可以參考下
    2016-10-10
  • 微信小程序 action-sheet底部菜單詳解

    微信小程序 action-sheet底部菜單詳解

    這篇文章主要介紹了微信小程序 action-sheet底部菜單詳解的相關資料,并附實例代碼，需要的朋友可以參考下
    2016-10-10
  • 微信小程序 scroll-view組件實現(xiàn)列表頁實例代碼

    微信小程序 scroll-view組件實現(xiàn)列表頁實例代碼

    這篇文章主要介紹了微信小程序 scroll-view組件實現(xiàn)列表頁實例代碼的相關資料,scroll-view組件介紹scroll-view是微信小程序提供的可滾動視圖組件,其主要作用是可以用來做手機端經(jīng)常會看到的上拉加載 ，需要的朋友可以參考下
    2016-12-12

最新評論