移動端複製按鈕(點選複製，clipboard.js)
一句話介紹下clipboard.js：實現了純 JavaScript (無 Flash)的瀏覽器內容複製到系統剪貼簿的功能。
我們可以通過以下方式獲取到clipboard.js：
1、可以使用cdn
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
2、也可以下載後引入(如果檔案過期可以在評論通知我)
連結：https://share.weiyun.com/95dc49ba3ee0a9c26fe04e1a160b8e41 （密碼：DE6x8U）
3、當然可以去官網下載
接著我們可以寫一個使用的demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script> <script src="clipboard.js"></script> <title>複製按鈕</title> </head> <body> <span id="target">我是一段優美的文字</span> <button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn"> 複製按鈕 </button> </body> <script> $(document).ready(function(){ var clipboard = new Clipboard('#copy_btn'); clipboard.on('success', function(e) { alert("複製成功",1500); e.clearSelection(); console.log(e.clearSelection); }); }); </script> </html>
程式碼並不複雜，data-clipboard-target繫結的是目標標籤，如果你只是複製一段固定的內容，也可以在觸發器元素裡新增data-clipboard-text屬性(demo中即button)；data-clipboard-action屬性有兩個值，一個是copy複製一個是cut剪下，但是剪下只在<input>或<textarea>中生效，預設值是copy。除了複製使用者輸入的內容，固定內容，還可以使用者分享連結等..........
4、當然clipboard.js亦會存在一些相容問題，下面是官網上的各瀏覽器支援情況
在網上看到了一些解決方案，比如二次封裝等...那時候自己是用了一個比較偷懶的方式....想起來真是臉紅
這是clipboard自帶成功與失敗的回撥函式。clipboard.on('success', function(e) { e.clearSelection(); alert("複製成功！"); }); clipboard.on('error', function(e) { alert("當前瀏覽器不支援此功能，請手動複製。") });
PS：Clipboard.isSupported()可以用來檢視瀏覽器是否支援。 PS2：以上為基本用法，需深入瞭解的同學跳轉官網
相關推薦
移動端複製按鈕(點選複製，clipboard.js)
一句話介紹下clipboard.js：實現了純 JavaScript (無 Flash)的瀏覽器內容複製到系統剪貼簿的功能。 我們可以通過以下方式獲取到clipboard.js： 1、可以使用cdn
bootstrap modal彈出框實現及實現按鈕點選複製功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg
jquery定義之後的按鈕點選事件，會產生累計的情況
使用jquery的on()方法為元素綁定了點選事件，點選同時傳送請求。完成後看效果，第一次點選沒有問題。再一次點選後發現傳送了兩次請求，後面再點擊發現請求的數量越來越多。當排查之後，發現只有一個元素綁定了事件，而且只調用了一次之後，得出最有可能的一種情況，就是點選事件被累加綁定了。 $("#ad
超連結按鈕點選變色，原來的連結恢復原色
視訊播放列表的超連結按鈕點選變色，原來的恢復原色，主要是讓使用者清楚的知道此刻播放的是哪一集。這裡所說的實現方法並不是利用css的link、hover、active所實現的，雖然css也能做到超連結點選變色，但是卻不能用到這裡的需求上，因為css實現的點選變色，是不能再點選頁面其他地方的，很顯然，看視訊的時候
antd移動端onClick事件點選無效
最近空餘時間比較多，自己想學習react跟移動端的東西，就選用了antd-mobile庫，框架搭好開發過程中遇到個問題，裡面繫結的點選事件無效,不僅是antd自帶的按鈕無效，原生button點選也沒反應，網上找了一大堆沒有好的解決方案。在除錯過程中發現 原來是我在設定底部導航的時候，把內容部分遮擋了
Android中Recyclerview使用7----條目中按鈕點選事件，在activity中呼叫(介面回撥)
0引入Recyclerview的支援庫 compile 'com.android.support:recyclerview-v7:23.4.0' 1效果圖： 2程式碼： 2.1MainActivity中： <span style="font-size:18p
移動端導航條點選一個欄目滑動到螢幕中間
HTML <ul class="tab-head"> <li class="tab-head-item active">衣服</li> <li class="tab-head-ite
移動端的坑---點選元素後閃爍、有半透明背景
1、點選元素後閃爍、有半透明背景 給元素新增： -webkit-tap-highlight-color : rgba (255, 255, 255, 0) ; -webkit-tap-highlig
去除移動端a標籤點選樣式
a{ outline:none； -webkit-tap-highlight-color: rgba(0,0,0,0); } -webkit-tap-highlight-color是ios和android下點選元素時出現的陰影,-webkit-tap-high
【Cocos2dx】使用CCControlButton建立按鈕、按鈕點選事件，點選事件中的元件獲取，setPosition的座標問題
按鈕不僅在遊戲，在任何地方都是不可或缺卻又是最基本的東西。在遊戲引擎Cocos2dx中也不例外。 下面用一個例子說明Cocos2dx中如何使用按鈕，同時，如果在Cocos2dx中獲取層，也就是場景、舞臺中的元件。 如下圖，有一個按鈕Clickme，被點選時候與不被點選的時間
【前端】angularJS或者jquery實現按鈕點選變色，再點選變回來
目的：使按鈕在兩種狀態之間切換，注意：簡單的通過.修改focus和active的樣式是做不到的。 效果圖： html程式碼： <div class="col-1">
小程式之按鈕點選之後，顯示隱藏效果不好使！
介面有一個botton，點選botton時，控制某些例如<view>顯示隱藏。點選之後，沒有切換顯示隱藏的效果！text.wxml程式碼test.js程式碼show方法中的程式碼data中的bol的程式碼介面效果！修改以上程式碼：由於，bol是在setData中，
點選複製按鈕複製指定文字內容，實現網頁中的複製功能
<div style="width: 48px; height: 36px; position: absolute; margin-left: 232px;*margin-left:0px;_margin-left: 0">
移動端、pc端通用點選複製
點選複製 function copyArticle(event){ const range = document.createRange(); range.selectNode(document.getElementById('dd')); const selection = w
clipboard.js-master點選複製到系統剪下板適合移動及PC端
現代化的“複製到剪下板”外掛。不包含 Flash。gzip 壓縮後僅 3kb。 A modern approach to copy text to clipboard No Flash. No frameworks. Just 3kb gzipped Copying text to
JS實現點選複製功能（完美解決移動端可用）
先看一下效果圖 使用此方法不需要轉換什麼<p>標籤，直接就使用<textarea>標籤，就是把它的樣式修改了一下，將背景和邊框都改為你要的顏色就可以了 上程式碼： //
jq 點選複製div裡面的內容 如果貼上到富文字中，會將樣式，裡面所有的標籤，文字一併貼上進去
<!doctype html> <html> <head> <meta charset="utf-8"> <title>點選複製功能</title> </head> <script src="http://code
【Html】Clipboard.js 實現點選複製，剪下板操作
可以使用cdn 或者直接下載 設定好引用路徑(百度雲下載) <script type="text/javascript" src="./dist/clipboard.min.js"></script> html <input type
Clipboard外掛實現點選複製功能，並且自動跳轉
Clipboard外掛是現在流行的實現複製功能的外掛之一，公司給了一個需求，要求能實現點選複製功能，於是乎就在這給大家分享一下經驗。外掛的下載以及使用百度搜索可以搜尋到，就不多說，直接上程式碼。 html部分，Clipboard功能很強大，它可以實現文字框內的複
點選複製按鈕將指定id內容複製到剪貼簿
描述：實現如圖效果解決： <div class="zbdh_xiaoyi yqjl_coin"> <h4>您的專邀屬請碼</h4> <