h5实现复制一段文字到剪贴板移动端通用

最新推荐文章于 2024-07-09 16:46:58 发布

赤简

最新推荐文章于 2024-07-09 16:46:58 发布

阅读量1.5k

点赞数 1

分类专栏：前端开发文章标签： javascript html

本文链接：https://blog.csdn.net/zjingru/article/details/106823464

版权

前端开发专栏收录该内容

17 篇文章 3 订阅

订阅专栏

需求：当点击某个按钮时复制某个标签里的文字。

实现：

<body>
	<div>
		<p id='text'>这是一段文字</p>
		<button onclick="copy()">点击复制p标签内容</button>
	</div>
	<script>
		function copy(){
			var text = document.getElementById('text').innerHTML;
			copyTo(text); //把要复制的内容传入到copyTo方法
		}
		function copyTo(content){
			var oInput = document.createElement('input');//创建一个input
			oInput.value = content;   					//给要复制的内容赋值input的value
			document.body.appendChild(oInput);			//body中添加input
			oInput.select(); 							// 选择对象 .select()获取文本域中的内容
			document.execCommand("Copy"); 				// 执行浏览器复制命令
			oInput.style.display = 'none'				// 把input隐藏
			alert('已成功复制到剪贴板');
		}
	</script>
</body>

上面的代码在ios上复制不了，可以使用以下方法，亲测有效。

function copyTo(content) {
			var input = document.createElement("input");
			input.value = content;
			document.body.appendChild(input);
			input.select();
			input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
			document.body.removeChild(input);
			mui.toast('复制成功！')
}

赤简

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
h5实现复制一段文字到剪贴板移动端通用

需求：当点击某个按钮时复制某个标签里的文字。实现：<body> <div> <p id='text'>这是一段文字</p> <button onclick='copy'>点击复制p标签内容</button> </div> <script> function copy(){ var text = document.getElementById('text').innerHTML;
复制链接

扫一扫