JavaScript+Html5實(shí)現(xiàn)按鈕復(fù)制文字到剪切板功能(手機(jī)網(wǎng)頁兼容)

更新時(shí)間：2017年03月30日 09:48:26 作者：努力飛翔的笨鳥

在學(xué)習(xí)javascript的過程中，遇到一個(gè)問題就是基于JavaScript+Html5實(shí)現(xiàn)按鈕復(fù)制文字到剪切板功能，下面小編給大家分享下我的實(shí)現(xiàn)思路，感興趣的朋友可以參考下

新學(xué)習(xí)JavaScript，就碰到這么一個(gè)需求，幾乎網(wǎng)上的方法都試過了。寫出了總結(jié)下

使用的方法：clipboard

插件下載地址：https://github.com/zenorocha/clipboard.js/tree/master

引入插件：目錄\clipboard.js-master\dist\clipboard.min.js

目錄中有各種demo，分別實(shí)現(xiàn)了固定的文字復(fù)制，input的復(fù)制等等，可以看下找找思路；

下邊來記錄下使用的方式：

一：引入插件：

<script src="js/clipboard.min.js" type="text/javascript"></script>

二：給標(biāo)簽添加屬性：data-clipboard-text

 <div id="btn" data-clipboard-text="1">
    <span>Copy</span>
  </div>

三：定義script ：實(shí)現(xiàn)復(fù)制功能---（寫的內(nèi)部的script，外部的總是報(bào)錯(cuò)，找不到類，新手不大懂，以后再補(bǔ)充）

<script>
var clipboard = new Clipboard('btn');
clipboard.on('success', function(e) {
e.clearSelection();
//復(fù)制成功
});
clipboard.on('error', function(e) {
//復(fù)制失敗
});
</script>

補(bǔ)充：new Clipboard()----參數(shù)為id class都可以，跟css定義一樣 id 或者.class

四：自定義復(fù)制的內(nèi)容；

new Clipboard('.btn', {
  target: function(trigger) {
    return trigger.nextElementSibling;
  }
});

通過return返回想復(fù)制的內(nèi)容，

五：列表頁復(fù)制每條列表內(nèi)容

可以給每個(gè)item自定義屬性data-clipboard-text即可

div.setAttribute("data-clipboard-text","asdf");

補(bǔ)充：電腦瀏覽器幾乎都可以支持，手機(jī)上安卓可以，蘋果有點(diǎn)問題，需要把標(biāo)簽設(shè)置成button

以上所述是小編給大家介紹的JavaScript+Html5實(shí)現(xiàn)按鈕復(fù)制文字到剪切板功能(手機(jī)網(wǎng)頁兼容)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

詳解JS WebSocket斷開原因和心跳機(jī)制
這篇文章主要介紹了JS WebSocket斷開原因和心跳機(jī)制，對(duì)websocket感興趣的同學(xué)，可以參考下
2021-05-05
JavaScript 正則表達(dá)式詳解
正則表達(dá)式(Regular Expression)是一門簡(jiǎn)單語言的語法規(guī)范，是強(qiáng)大、便捷、高效的文本處理工具，它應(yīng)用在一些方法中，對(duì)字符串中的信息實(shí)現(xiàn)查找、替換和提取操作
2021-11-11
怎么清空javascript數(shù)組
這是一個(gè)很基礎(chǔ)的問題，但是我們往往經(jīng)常做錯(cuò)，這里簡(jiǎn)單分享下，方便需要的朋友
2013-05-05
二叉樹先序遍歷的非遞歸算法具體實(shí)現(xiàn)
這篇文章主要介紹了二叉樹先序遍歷的非遞歸算法，有需要的朋友可以參考一下
2014-01-01
如何讓頁面加載完成后執(zhí)行js
本篇文章是對(duì)如何讓頁面加載完成后執(zhí)行js的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-06-06
參考：關(guān)于Javascript中實(shí)現(xiàn)暫停的幾篇文章
參考：關(guān)于Javascript中實(shí)現(xiàn)暫停的幾篇文章...
2007-03-03
javascript中floor使用方法總結(jié)
在本篇文章中小編給大家分享了關(guān)于javascript中floor使用的知識(shí)點(diǎn)內(nèi)容，有興趣的朋友們學(xué)習(xí)下。
2019-02-02
js修改元素樣式的九種方式總結(jié)
用慣了vue和react之后可能會(huì)慢慢淡忘掉原生的一些操作dom的幾種方式,有的時(shí)候確實(shí)需要我們通過原生的方式進(jìn)行操作,下面這篇文章主要給大家介紹了關(guān)于js修改元素樣式的九種方式,需要的朋友可以參考下
2024-04-04
JavaScript的事件機(jī)制詳解
事件是將JavaScript腳本與網(wǎng)頁聯(lián)系在一起的主要方式，是JavaScript中最重要的主題之一。本文將詳細(xì)探討JavaScript的事件機(jī)制，并對(duì)比分析了瀏覽器之間的不同，具體內(nèi)容包括事件流、事件處理程序綁定方式、事件對(duì)象等。
2017-01-01
多個(gè)表單中如何獲得這個(gè)文件上傳的網(wǎng)址實(shí)現(xiàn)js代碼
假設(shè)一個(gè)網(wǎng)頁里有多個(gè)表單，其中一個(gè)表單里有文件上傳，問題是如何獲得這個(gè)文件上傳的網(wǎng)址呢，接下來為大家介紹下實(shí)現(xiàn)的js代碼，感興趣的朋友可以參考下哈，希望可以幫助到你
2013-03-03