快捷導(dǎo)航

JavaScript之clipboard用法詳解

更新時間：2021年08月12日 10:35:29 作者：馬優(yōu)晨

這篇文章主要介紹了JavaScript之clipboard用法詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

（1）介紹：

clipboard.js是一款輕量級的實(shí)現(xiàn)復(fù)制文本到剪貼板功能的JavaScript插件。通過該插件可以將輸入框，文本域，DIV元素中的文本等文本內(nèi)容復(fù)制到剪貼板中
clipboard.js支持主流的瀏覽器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;

（2）clipboard復(fù)印內(nèi)容的方式有

從target復(fù)印目標(biāo)內(nèi)容
通過function 要復(fù)印的內(nèi)容
通過屬性返回復(fù)印的內(nèi)容

target復(fù)印目標(biāo)內(nèi)容，這里不說，就說一下function和屬性的操作。

（3）Function操作有兩種：

第一種：

通過target的function復(fù)印內(nèi)容
通過target指定要復(fù)印的節(jié)點(diǎn)，這里返回舒值是‘hello'

   <button class="btn">Copy_target</button>
   <div>hello</div>

   <script>
   var clipboard = new Clipboard('.btn', {
   // 通過target指定要復(fù)印的節(jié)點(diǎn)
       target: function() {
                  return document.querySelector('div');
             }
   });

   clipboard.on('success', function(e) {
       console.log(e);
   });

   clipboard.on('error', function(e) {
       console.log(e);
   });
   </script>

第二種：

通過text的function復(fù)印內(nèi)容
text的function指定的復(fù)印內(nèi)容，這里返回‘to be or not to be'

<button class="btn">Copy</button>
<script>
   var clipboard = new Clipboard('.btn', {
   // 點(diǎn)擊copy按鈕，直接通過text直接返回復(fù)印的內(nèi)容
       text: function() {
           return 'to be or not to be';
       }
   });

   clipboard.on('success', function(e) {
       console.log(e);
   });

   clipboard.on('error', function(e) {
       console.log(e);
});

（4）通過屬性返回復(fù)印的內(nèi)容

第一種：單節(jié)點(diǎn)

通過id指定節(jié)點(diǎn)對象，并做為參數(shù)傳送給Clipboard。這里的返回值的內(nèi)容是data-clipboard-text的內(nèi)容

// 通過id獲取復(fù)制data-clipboard-text的內(nèi)容 
<div id="btn" data-clipboard-text="1">
        <span>Copy</span>
</div>
 
<script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);
 
    clipboard.on('success', function(e) {
        console.log(e);
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>

第二種：多節(jié)點(diǎn)

通過class獲取所有button按鈕，并做為參數(shù)傳送給Clipboard。每個按鈕被點(diǎn)擊時，返回值的內(nèi)容是其對應(yīng)的data-clipboard-text的內(nèi)容，分別是1，2，3

//   通過class注冊多個button，獲取data-clipboard-text的值
<button class="btn" data-clipboard-text="1">Copy</button>
    <button class="btn" data-clipboard-text="2">Copy</button>
    <button class="btn" data-clipboard-text="3">Copy</button>
 <script>
    var clipboard = new Clipboard('.btn');
 
    clipboard.on('success', function(e) {
        console.log(e);
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

（5）函數(shù)和屬性的兼容方式

函數(shù)：

//ClipboardJS.isSupported()　　//--------這句為：是否兼容
var clipboard = new Clipboard('.btn');
//優(yōu)雅降級:safari 版本號>=10,提示復(fù)制成功;否則提示需在文字選中后，手動選擇“拷貝”進(jìn)行復(fù)制
clipboard.on('success', function(e) {
    alert('復(fù)制成功!')
    e.clearSelection();
});
clipboard.on('error', function(e) {
    alert('請選擇“拷貝”進(jìn)行復(fù)制!')
//嘗試去掉alert，能彈出系統(tǒng)的“拷貝”工具，但是需要點(diǎn)擊兩次按鈕才能彈出，具體原因還不清楚，參考上圖。有人說可以試一下在觸發(fā)的地方寫一個空點(diǎn)擊事件, οnclick="" 因?yàn)閕os不單純支持on事件
});

屬性：

<img
   src="../../../../assets/images/zuop_award/copy_link.png"
      @click="copy"
      data-clipboard-action="copy"
      class="email"
      :data-clipboard-text="'mayouchen@csdn.com'"
    /> 

-------------------
  copy() {
     var clipboard = new Clipboard(".email")
     // console.log(clipboard);
     clipboard.on("success", e => {
       // console.log("復(fù)制成功", e);
       Toast({
         message: "復(fù)制成功"
       })
       // 釋放內(nèi)存
       clipboard.destroy()
     })
     clipboard.on("error", e => {
       // 不支持復(fù)制
       Toast({
         message: "手機(jī)權(quán)限不支持復(fù)制功能"
       })
       console.log("該瀏覽器不支持自動復(fù)制")
       // 釋放內(nèi)存
       clipboard.destroy()
     })
   }

到此這篇關(guān)于JavaScript之clipboard用法詳解的文章就介紹到這了,更多相關(guān)JavaScript之clipboard內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: