js實現複製到剪切板

来源:https://www.cnblogs.com/bookobe/archive/2019/08/04/11298115.html
-Advertisement-
Play Games

搜羅到兩種相容性還不錯的方式。 1、第一種,通過clipboard.js插件實現(推薦) 此插件封裝了很多種使用方式很方便,具體demo,可以去GitHub上看,clipboard傳送門 2、第二種,純js實現: 上面兩種方式相容性都不錯,親測可用。 ...


搜羅到兩種相容性還不錯的方式。

1、第一種,通過clipboard.js插件實現(推薦

此插件封裝了很多種使用方式很方便,具體demo,可以去GitHub上看,clipboard傳送門

2、第二種,純js實現:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CopyDemo</title>
</head>
<body>
    <div id=NewsToolBox></div>
    <div id="text-content">      
        <p>測試p1</p>      
        <p>測試p2</p>  
    </div>
    <button id="copy-text-btn">複製</button>
</body>
</html>
<script type="text/javascript">
    // 複製全文
    document.getElementById("copy-text-btn").onclick=function(){
        var ssrsss =document.getElementById("text-content").innerText.replace(/\ +/g, ""); //獲取文本並去掉空格
            var flag = copyText(ssrsss); //傳遞文本
            alert(flag ? '複製成功' : '複製失敗')
        };

        function copyText(text) {
            var textarea = document.createElement("textarea"); //創建input對象
            var currentFocus = document.activeElement; //當前獲得焦點的元素
            var toolBoxwrap = document.getElementById('NewsToolBox'); //將文本框插入到NewsToolBox這個之後
            toolBoxwrap.appendChild(textarea); //添加元素
            textarea.value = text;
            textarea.focus();
            if (textarea.setSelectionRange) {
                textarea.setSelectionRange(0, textarea.value.length); //獲取游標起始位置到結束位置
            } else {
                textarea.select();
            }
            try {
                var flag = document.execCommand("copy"); //執行複製
            } catch (eo) {
                var flag = false;
            }
            toolBoxwrap.removeChild(textarea); //刪除元素
            currentFocus.focus();
            return flag;
        }
    </script>

上面兩種方式相容性都不錯,親測可用。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 第一次寫博客,堅持了一個多月時間,Vue源碼分析基本分析完了,回過頭也看也漏了一些地方,比如雙向綁定里的觀察者模式,也可以說是訂閱者模式,也就是Vue里的Dep、Watcher等這些函數的作用,網上搜一下講解也挺多的,這些知識點也是很重要的,對於閱讀源碼的同學這一塊務必要花點時間學一下 還有一個挺重 ...
  • 通常情況下,一個特定的字體僅會包含少數的可用字重。若所指定的字重不存在直接匹配,則會通過字體匹配演算法規則匹配使用鄰近的可用字重。這也就是為什麼我們有時候使用特定字重時沒有“生效”,看起來跟其它字重差不多的原因所在。 總結: 1.在實際中,最為常用的字重是normal,bold或100-900; 2. ...
  • 下麵列舉了61種jQuery 選擇器 參考 ...
  • 正則的定義 字元出現的規律的一種規則! 正則的作用 驗證和查找 創建正則 1、var reg=/輸入正則規則/; 註意:/ /內部是正則的天下,不支持js語法! 2、var reg=ner RegExp(); //瞭解即可,不需要強記! 正則的語法 1、關鍵詞的原文就是最簡單的正則 2、字元集:一個 ...
  • Linux版本 Ubuntu 12.04 (32bit) 安裝Git 生成ssh key 安裝node 使用二進位文件 錯誤一:./node: cannot execute binary file 原因可能如下: 1、非root用戶或者無執行許可權 2、編譯環境不同(程式由其他操作環境複製過來) PS ...
  • babel : 一個js編譯器 一、let const js作用域:全局作用域 、 函數作用域 、塊級作用域(新增) let/const: 無變數提升 不能重覆定義 const的值如果是基本數據類型,則定義後不能改變;如果是引用數據類型,則可以改變其中的項 存在暫時性死區(TDZ) Object.f ...
  • 首先先來描述一下我所遇到的問題,我在一個首頁的index.jsp頁面中用到了iframe框架,見下圖 在iframe中引入jsp頁面的路徑,是幾個iframe框架組合成的一個完整的頁面,但是他們的存在是相互獨立的。接著我在一個子頁面中(right.jsp)中, 想要將頁面跳轉到登錄的頁面(登錄頁面是 ...
  • AJAX PHP示例 AJAX用於創建更多互動式應用程式。 以下示例演示了當用戶在輸入欄位中鍵入字元時,網頁如何與Web伺服器通信: 體驗一下交互 在上面的示例中,當用戶在輸入欄位中鍵入字元時,showHint()執行被調用的函數。該函數由onkeyup事件觸發。 代碼說明:首先,檢查input欄位 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...