js插件實現一鍵複製功能

来源:http://www.cnblogs.com/yaoyuqian/archive/2017/11/26/7900863.html
-Advertisement-
Play Games

clipboard.js 可以實現純 JS 的從瀏覽器複製文本到系統剪貼板的功能。 使用方法: 1. 下載 clipboard.js,併在頁面中引入該插件。clipboard.js 下載地址: https://github.com/zenorocha/clipboard.js 2. 需要複製的目標文 ...


clipboard.js 可以實現純 JS 的從瀏覽器複製文本到系統剪貼板的功能。

使用方法:

  1. 下載 clipboard.js,併在頁面中引入該插件。clipboard.js 下載地址: https://github.com/zenorocha/clipboard.js

<script src="/lib/js/clipbaord.js"></script>

  2. 需要複製的目標文本

<span id="tar_text" >我是一段需要被覆制的文本</span>

  3. 複製按鈕(註:此處需要給觸發複製時間的按鈕添加兩個屬性,data-clipboard-action 及 data-clipboard-target,data-clipboard-target的屬性值為目標文本的 id 值)

 <button  id="copy" data-clipboard-action="copy" data-clipboard-target="#tar_text">Copy My Invitation Address</button>

  4. 實例化 Clipboard 對象

  var clipboard = new Clipboard('#copy');
   clipboard.on('success', function (e) {
        alert("複製成功!");
   });
   clipboard.on('error', function (e) {
        alert("對不起,您的瀏覽器暫不支持一鍵複製功能!");
   });

 

  

 


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

-Advertisement-
Play Games
更多相關文章
  • Elasticsearch 是一個實時的分散式搜索分析引擎, 它能讓你以一個之前從未有過的速度和規模,去探索你的數據。 它被用作全文檢索、結構化搜索、分析以及這三個功能的組合。-- 權威指南Elasticsearch版本:6.0一、安裝1、從官網下載Elasticsearch:https://www... ...
  • 一、socket(單鏈接) 1、socket:應用層與TCP/IP協議族通信的中間軟體抽象層,它是一組介面。在設計模式中,Socket其實就是一個門面模式,它把複雜的TCP/IP協議族隱藏在Socket介面後面;也有人將socket說成ip+port,ip是用來標識互聯網中的一臺主機的位置,而por ...
  • 1.元組 元組和列表很相似,最大的區別就是不可以對元組進行修改,因此也可將元組稱之為不可修改的列表。 在表示上列表使用中括弧,元組使用的是小括弧。都是用逗號將元素隔開。 有一點值得註意的是,創建只有一個元素的元組時需在元素後加逗號,如tup = (2,)。所以可見元組判別元組的依據是逗號而不是小括弧 ...
  • feedparser模塊 1.簡介 feedparser是一個Python的Feed解析庫,可以處理RSS ,CDF,Atom 。使用它我們可從任何 RSS 或 Atom 訂閱源得到標題、鏈接和文章的條目了。 RSS(Really Simple Syndication,簡易信息聚合):是一種描述和同 ...
  • The GNU Compiler Collection (usually shortened to GCC) is a compiler system produced by the GNU Project supporting various programming languages. But ...
  • 1、Java常量的應用 語法:final 常量名 = 值; 舉一個簡單的例子 2、Java數組 Java中操作數組只需要四個步驟: (1)聲明數組 語法:數組類型[ ] 數組名; 或者數組類型 數組名[ ]; (2)分配空間 語法: 數組名 = new 數據類型 [ 數組長度 ]; 也可以直接合併 ...
  • 從0開始搭建自動部署環境(續) 前言 上一篇 "從0開始搭建自動部署環境" 雖然環境搭建起來了,但是配置少了一部分步驟。本來應該寫到上一篇中,但是這樣做篇幅過長了。另外,此篇會使用自動部署一個同步在Github上的Spring Boot項目為例,介紹如何使用該自動部署環境。 配置Global Too ...
  • 不管是java還是.net基礎設施必不可少。 MQ: 如果發現MQ是瓶頸。不管用的是rabbitmq還是kafka,其他的也好。作為生產者要確認超時時間、重試機制、非同步線程池。消費方要做兩件事:發現和解決。發現的主要是通過積壓閾值最快發現問題。解決的方法主要有:短期方案:增大線程數,增加伺服器。長期 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...