天天看点

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

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