DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript技巧 >> JavaScript+Html5實現按鈕復制文字到剪切板功能(手機網頁兼容)
JavaScript+Html5實現按鈕復制文字到剪切板功能(手機網頁兼容)
編輯:JavaScript技巧     

新學習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實現按鈕復制文字到剪切板功能(手機網頁兼容),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved