复制剪贴板兼容ios微信浏览器
先贴踩坑经历, 须要代码直接下方提取。
复制首先想到的是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事件发生的同时内容已经被全选了。
复制代码