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

最新推荐文章于 2024-06-22 14:01:29 发布

骑着蚂蚁追大象

最新推荐文章于 2024-06-22 14:01:29 发布

阅读量3.8k

点赞数

分类专栏： HTML 文章标签： ZeroClipboard JS实现复制功能手机浏览器复制功能

本文链接：https://blog.csdn.net/qq_36176250/article/details/77427171

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

骑着蚂蚁追大象

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ZeroClipboard 不支持手机浏览器复制 H5页面的几种复制方式分享

ZeroClipboard能很好的兼容各大主流的浏览器，实现复制功能，所以在PC端建议使用ZeroClipboard来达到这个功能。但是ZeroClipboard是基于flash来实现复制的，所以在手机上无法使用，这里给大家分享2个方式，在手机上可以实现复制功能，但不能兼容所有的浏览器，比如手机版的QQ浏览器就不支持，其他浏览器暂未测试。第一种：优点：代码简单，容易理解。缺点：能够
复制链接

扫一扫