解決移動端複製問題

CallmeJay發表於2019-02-21

今天有個新需求要對H5中的訂單號加一條複製功能，我一想，這還不簡單，clipboard不就完了。但是一翻操作下，在pc模擬器下可以，但是在手機上卻咋也不行。那這是咋回事？google吧。 找到一位大佬寫的文章JavaScript複製內容到剪貼簿,不知道姿勢不對還是RP敗完，試了半天還是不行。 算了還是去clipboard官網看看吧.

經過我認真地翻譯閱讀，發現一個api正合我意，果斷下手試試。

上菜：

<div class="order">
  <div>訂單號：<span id="orderNo">123</span></div>
  <p class="copy" data-clipboard-target="#orderNo">複製</p>
</div>
<div class="back">返回</div>
</div>
複製程式碼
// 點選複製
$('.copy').click(function (event) {
// If you want to dynamically set a text, you'll return a String.
  new ClipboardJS(".copy", {
    text: function(trigger) {
      console.log('複製成功');
      return $("#orderNo").text();
    }
  });
})
複製程式碼

chrome下試了試，沒問題，開啟我的小手機，點選複製，完美~

< just record >

相關文章