复制剪贴板兼容ios微信浏览器

Condee
2,358 阅读2分钟

先贴踩坑经历, 需要代码直接下方提取。

复制首先想到的是execComand()方法, 于是代码如下:

  <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.

clipBoard 也做过降级处理， 如果你需要兼容更多的浏览器。请用Input代替div里的内容,因为error事件发生的同时内容已经被全选了。
avatar
文章
阅读
粉丝