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