應用JavaScript的複製

2019年8月24日 110次阅读 来源: 晴雨稀兮

現在有兩種要領完成挪動端的複製，且現在這兩種要領只在挪動端實驗過，PC端的支撐狀況還不是很清晰。

1. 運用clipboard插件

step1：引入插件

<script type="text/javascript" src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>

step2： 編寫HTML，點擊button，一鍵粘貼

<button class="copyBtn" data-clipboard-text="輸入你想複製的內容">去粘貼</button>

step3：編寫JavaScript，實例化clipboard對象

var clipboard = new Clipboard('.copyBtn').on('success', function(e) {
      var e = e || window.event;
      console.log(e);
      // to do what you want    
  }).on('error', function(e) {});

別的，step3中複製勝利以後，打印的e對象以下：

e = {
    action:"copy",
    clearSelection: function(){}, // 消滅已選中地區，可直接挪用這個要領
    text: "輸入你想複製的內容", // 你要複製的內容
    trigger: button.copyBtn, // 當前觸發事宜的對象，可修正其屬性
}

2. 運用select()和execCommand實行copy

HTML：

<p>
    <span>微信號</span>
    <textarea id="copyWechat" row="1" readonly="readonly" style="resize:none; padding:0; border:0">wechatno</textarea>
</p>

javaScript

document.getElementById("copyWechat").select();
document.execCommand("copy", false, null);

此種體式格局的弊病：
（1）在Android端可支撐，但是在iOS上，並沒有複製到內容，至於為何沒有複製到內容，臨時還沒找到緣由；
（2）只能支撐在input和textarea中複製，由於select()要領支撐input和textarea，款式上調治起來較費力，沒有第一種要領好用。

    原文作者：晴雨稀兮
    原文地址: https://segmentfault.com/a/1190000015357505
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞