HTML+JS实现复制粘贴

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

April_519

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

阅读量2.9k

点赞数

分类专栏：代码库前端文章标签： HTML复制

本文链接：https://blog.csdn.net/April_519/article/details/102700125

版权

代码库同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

HTML+JS实现网页和手机端复制粘贴

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一键复制</title>
</head>
<body>
  	<input readonly type="text" id="text" value="dfsdf">
   	<span style="cursor: pointer;width: 45px;height: 20px;line-height: 22px;color: #fff;background: #a32d2b;display: inline-block;text-align: center;font-size: 10px;margin-left: 2px;"
    class="copy" onclick="copyText()">复制</span>
	<script>
		// 复制
		function copyText() {
			var text = document.getElementById("text");
			var textUser = '#text';
			navigatorCopy(text, textUser);
		}

		// 一键复制文本，兼容iso和安卓
		function navigatorCopy(inputId, domUser) {
			var u = navigator.userAgent;
			//ios兼容
			if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
				var copyDOM = document.querySelector(domUser); //要复制文字的节点  
				console.log(copyDOM)
				var range = document.createRange();
				// 选中需要复制的节点  
				range.selectNode(copyDOM);
				// 执行选中元素  
				window.getSelection().addRange(range);
				// 执行 copy 操作  
				var successful = document.execCommand('copy');
				try {
					var msg = successful ? '复制成功！' : '复制失败';
					alert(msg);
				} catch (err) {
					alert('复制失败!');
				}
				// 移除选中的元素  
				window.getSelection().removeAllRanges();
			}
			// 安卓/PC浏览器
			else{//if (u.indexOf('Android') > -1) { //安卓
				var copytext = inputId;
				copytext.select(); // 选择对象
				try {
			    	var msg = document.execCommand('copy') ? '成功' : '失败';
			    	alert('复制' + msg);
			    } catch (err) {
			    	alert('不能使用这种方法复制内容');
			    }
			}
		}
	</script>
</body>
</html>

我是在ajax请求中使用的复制粘贴功能，在Chrome浏览器中可以正常使用，但是在Firefox和安卓手机浏览器上则出现了document.execCommand('cut'/'copy') 被拒绝，因为它不是从短时运行的用户生成的事件处理程序内部进行调用。的情况，最后发现是由于Ajax默认是异步执行可以在Ajax中，添加async:false，将ajax设置为同步，问题即可解决。

April_519

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML+JS实现复制粘贴

HTML+JS实现网页和手机端复制粘贴直接上代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>一键复制</title></head><body> <input readonly type="...
复制链接

扫一扫

专栏目录