複製剪貼板兼容ios微信瀏覽器

時間 2019-11-17

原文原文鏈接

先貼踩坑經歷, 須要代碼直接下方提取。

複製首先想到的是execComand()方法, 因而代碼以下:javascript

<body>
    <input id="inputTarget" type="text" name="" value="">
    <button id="copyBtn"  type="button" name="button">複製</button>
  </body>
  <script type="text/javascript">
    var dom = document,
    inputTarget = dom.getElementById('inputTarget');
    dom.getElementById('copyBtn').onclick = function(){
      inputTarget.select() //select() 方法用於選取文本域中的內容。
      dom.execCommand('Copy')  //document暴露 execCommand 方法，該方法容許運行命令來操縱可編輯區域的內容。具體參數 https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand#%E5%91%BD%E4%BB%A4
      inputTarget.blur() //讓輸入框失焦
    }
  </script>
複製代碼

PC上對於execCommand 還算是很友好了的.
複製代碼

若是隻是PC上的 已是足夠用了. 
複製代碼

若是要具體實現只留一個複製button 在這裏複製你提早定義好的內容的話,

1.input opacity:0 ,並position 脫離文本流
2. 
var dom = document,
    inputTarget = dom.createElement('input'); //建立一個input 節點
inputTarget.setAttribute('value', '你想要複製的內容') //設置value
dom.body.appendChild(inputTarget) // 放到body去
inputTarget.select()  //選中input文本內容
dom.execCommand('Copy') //copy
dom.body.removeChild(inputTarget) // 移除input 節點
複製代碼

兼容手機的複製粘貼

可是在手機端你就會發現：
複製代碼

因此以後用了這個clipBoard.js （No Flash. No frameworks. Just 3kb gzipped）
https://github.com/zenorocha/clipboard.js/
文檔比較清楚的描述了引入方式,這裏再也不贅述.
仍是直接上代碼:

<div id="pasteUrl" style="opacity: 0">複製的內容</div>
 <a href="javascript:void(0)" class="copyBtn" data-clipboard-action="copy" data-clipboard-target="#pasteUrl"></a>

<script>
   var clipboard = new ClipboardJS('.copyBtn').on('success', function(e) {
       console.log(e.text);
   })
</script>
這樣在手機端就也能夠進行復制了,這樣是兼容了微信瀏覽器的

必定要用 a 去代替 div 。 否則微信裏觸發不了copy事件。(緣由多是安全考慮不能觸發)
複製代碼

The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.java

clipBoard 也作過降級處理， 若是你須要兼容更多的瀏覽器。請用Input代替div裏的內容,由於error事件發生的同時內容已經被全選了。
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

複製剪貼板兼容ios微信瀏覽器

先貼踩坑經歷, 須要代碼直接下方提取。

若是要具體實現 只留一個 複製button 在這裏複製你提早定義好的內容的話,

兼容手機的複製粘貼

若是要具體實現只留一個複製button 在這裏複製你提早定義好的內容的話,