使用JS復制內(nèi)容到剪貼板(copy to clipboard/javascript)

本來想這樣的內(nèi)容其實真不應(yīng)急記錄了,網(wǎng)上太多了,但是還真要用到的時候才發(fā)現(xiàn),也不都是這么好用。所以還是記錄一下。

這次使用的zeroclipboard這個工具來實現(xiàn),Git上的項目在這:
https://github.com/zeroclipboard/zeroclipboard

1.下載

把Git上的dist目錄copy到自己的目錄中,其實只需要ZeroClipboard.js就可以了。

2.demo.html

<html> <body> <script src="/js/zc/ZeroClipboard.js"></script> <textarea id="fe_text" cols="50" rows="3">Copy me!</textarea> <button id="copy-button" data-clipboard-target="fe_text" data-clipboard-text="Default clipboard text from attribute" title="Click to copy me.">Copy to Clipboard</button> <script type="text/javascript"> var client = new ZeroClipboard( document.getElementById("copy-button") ); client.on( "ready", function( readyEvent ) {} ); </script> </body> </html>

3.細節(jié)

3.1 js是有先后順序的

要先引用<script src="/js/zc/ZeroClipboard.js"></script>

3.2 控件使用

data-clipboard-target是目標控件,data-clipboard-text是默認內(nèi)容

3.3初始化

初始化要在控件之后,new ZeroClipboard參數(shù)是要使用的控件ID,然后啟用client.on

更多使用請參考作者項目。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,545評論 19 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,001評論 25 709
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一種新的協(xié)議。它實...
    香橙柚子閱讀 24,735評論 8 183
  • 因為原文太長超出字數(shù),Lesson 3 就放在另一篇文章里 How to Use Git and GitHub 標...
    赤樂君閱讀 5,493評論 1 5
  • 洗完澡,對著鏡子擦臉的時候仔仔細細的端詳了一下自己,不得不承認,真的變丑了。痘痘布滿了下顎,連腦門也不...
    超耳俠閱讀 1,164評論 0 1

友情鏈接更多精彩內(nèi)容