您的位置：首页 > Web前端 > HTML5

ZeroClipboard 不支持手机浏览器复制 H5页面的几种复制方式分享

2017-08-20 10:51 573 查看

ZeroClipboard能很好的兼容各大主流的浏览器，实现复制功能，所以在PC端建议使用ZeroClipboard来达到这个功能。

但是ZeroClipboard是基于flash来实现复制的，所以在手机上无法使用，这里给大家分享2个方式，在手机上可以实现复制功能，但不能兼容所有的浏览器，比如手机版的QQ浏览器就不支持，其他浏览器暂未测试。

第一种：

优点：代码简单，容易理解。

缺点：能够支持复制的标签不多，比如将textarea标签换成p标签，div标签，span标签，等，就不支持了，input的value可以支持。其他暂未测试。反正不够灵活。

以下是完整代码演示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<title></title>
</head>
<body>
<input type="button" id="fuzhi" value="点击复制"/>
<br /><br />
<textarea cols="42" rows="4" id="b"></textarea>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#fuzhi").click(function(){
var Url2 = document.getElementById("b");
Url2.select();
document.execCommand("Copy");
alert("已复制好，可贴粘。");
});
});
</script>
</html>

第二种：
优点：能够兼容绝大部分的标签，想复制哪里就复制哪里。

缺点：代码多，不太容易理解

以下是完整版的代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<title>移动端复制到剪贴板！</title>
</head>
<body>
<p>
哈哈
<span id="target">
你没看错，就是复制的这里
</span>
</p>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">
复制按钮
</button>
</body>
<script>
$(document).ready(function(){
var targetText=$("#target").text();
var clipboard = new Clipboard('#copy_btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
alert("复制成功");
e.clearSelection();
});
});
</script>
</html>

好了，以上就是在手机端建议使用的2中复制方式，如果你还有其他的方式，欢迎在下方评论区说出你的方法！3Q

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航