新學習JavaScript,就碰到這么一個需求,幾乎網(wǎng)上的方法都試過了。寫出了總結(jié)下
使用的方法:clipboard
插件下載地址:https://github.com/zenorocha/clipboard.js/tree/master
引入插件:目錄/clipboard.js-master/dist/clipboard.min.js
目錄中有各種demo,分別實現(xiàn)了固定的文字復制,input的復制等等,可以看下找找思路;
下邊來記錄下使用的方式:
一:引入插件:
<script src="js/clipboard.min.js" type="text/javascript"></script>
二:給標簽添加屬性:data-clipboard-text
<div id="btn" data-clipboard-text="1"> <span>Copy</span> </div>
三:定義script :實現(xiàn)復制功能---(寫的內(nèi)部的script,外部的總是報錯,找不到類,新手不大懂,以后再補充)
<script>var clipboard = new Clipboard('btn');clipboard.on('success', function(e) {e.clearSelection();//復制成功});clipboard.on('error', function(e) {//復制失敗});</script>
補充:new Clipboard()----參數(shù)為id class都可以,跟css定義一樣 id 或者.class
四:自定義復制的內(nèi)容;
new Clipboard('.btn', { target: function(trigger) { return trigger.nextElementSibling; }});
通過return返回想復制的內(nèi)容,
五:列表頁復制每條列表內(nèi)容
可以給每個item自定義屬性data-clipboard-text即可
div.setAttribute("data-clipboard-text","asdf");
補充:電腦瀏覽器幾乎都可以支持,手機上安卓可以,蘋果有點問題,需要把標簽設置成button
以上所述是小編給大家介紹的JavaScript+Html5實現(xiàn)按鈕復制文字到剪切板功能(手機網(wǎng)頁兼容),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持!
新聞熱點
疑難解答