JS点击将内容复制到剪切板，兼容苹果浏览器

六月初六月初 JavaScipt 2018-12-18 17:37:35

JS代码实现点击页面按钮，将特定内容复制到剪切板：

原生JS，苹果兼容有问题：

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span id="wechats">这是将要复制到剪切板的内容</span>
		<input type="button" onclick="gourl()" name="" id="" value="点击即可将上面内容复制到剪切板" />
		<script>
			function gourl(){
			    var Url2=document.getElementById("wechats").innerText;
		        var oInput = document.createElement('input');
		        oInput.value = Url2;
		        document.body.appendChild(oInput);
		        oInput.select(); // 选择对象
		        document.execCommand("Copy"); // 执行浏览器复制命令
		        oInput.className = 'oInput';
		        oInput.style.display='none';
			}
		</script>
	</body>
</html>

clipboard插件实现复制到剪切板，兼容苹果浏览器：

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
	</head>
	<body>
		<input type="button" class="btnss" name="" id="" value="点击将js的值复制到剪切板" />
		<script>
			var clipboard = new ClipboardJS('.btnss', {
		        text: function() {
		            return "这里是复制到剪切板的内容部分！";
		        }
		    });
		
		    clipboard.on('success', function(e) {
		        console.log(e);
		        //复制成功
		    });
		
		    clipboard.on('error', function(e) {
		        console.log(e);
		        //复制失败
		    });
		</script>
	</body>
</html>

注：关于该插件更详细的使用方法，大家可以去clipboard官网查看！


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！