clipboard.js在剪切中的使用

目前只是對文字的複製。

下面的代碼解釋：

1.html

須要添加data-clipboard="copy"和data-clipboard-target="對象選擇器"的屬性。

其中data-clipboard-target表示複製的目標，用選擇的形式表示，包括類選擇器，id選擇器，元素選擇器等。 

<section>
      
 <p id="qq1">123456789</p>
 <input type="button" class="copy1" style="background-color:#e1cbcb;color:red;" data-clipboard-action="copy" data-clipboard-target="#qq1" value="複製" />
  <p>農村淘寶商家合做羣：</p>
  <p id="qq2">12345678900</p>
  <input type="button" class="copy2" style="background-color:#e1cbcb;color:red;" data-clipboard-action="copy" data-clipboard-target="#qq2" value="複製" />
 </section>

　　

2.javascript

a.須要引入clipboard.js，代碼路徑視本身的項目而定。

b.實例化Clipboard，須要傳入按鈕的選擇器，即經過什麼動做實現剪切。

c.能夠註冊剪切成功和失敗的事件，形式爲clipboard.on("success 或者error",function(e) {});

 

 <script src="Scripts/clipboard.min.js"></script>   
 <script>
        $(function () {
 var clipboard1 = new Clipboard(".copy1");
            //clipboard1.on('success', function (e) {
            //    alert();
            //});

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

        });




    </script>

3.測試

剪切成功，被複制的文本狀態以下圖所示。