將文本複製到剪貼板

clipboard.js

將文本複製到剪貼板應該不難。它不需要數十個步驟來配置或加載數百KB。但最重要的是,它不應該依賴於Flash或任何膨脹的框架。
這就是clipboard.js存在的原因。

安裝

npm install clipboard --save

如果您不進行包管理,只需直接引入即可。點擊此處下載clipboard.js

<script src="js/clipboard.min.js" ></script>

用法

首先,您需要通過傳遞DOM選擇器,HTML元素或HTML元素列表來實例化它。

new ClipboardJS(".btn");

用法一:從另一個元素複製文本

您可以通過data-clipboard-target在觸發器元素中添加屬性來實現。

<!--目標--> 
<input id="foo" value="123456"/>
<button class="btn" data-clipboard-target="#foo">點擊複製到剪貼板</button>
<script type="text/javascript">
	new  ClipboardJS('.btn ');
</script>

用法二:從屬性複製文本

事實是,你甚至不需要另一個元素來複制其內容。您只需data-clipboard-text在觸發器元素中包含一個屬性即可。

<button class="btn" data-clipboard-text="123456555">點擊剪切到剪貼板</button>

本文借鑑自https://github.com/zenorocha/clipboard.js 點擊參考更多高級功能

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章