码迷,mamicode.com
首页 > Web开发 > 详细

【JS】实现剪切板功能

时间:2020-05-24 13:57:44      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:tar   char   移动   方法   append   链接   weixin   button   exe   

某次面试中被问到过,类似的还有用文本实现js的撤销恢复功能。

核心原理: 利用浏览器提供的copy命令
参考链接
注意: 对ipad、iphone等苹果移动端需做单独处理

document.execCommand("copy");
  • 如果是复制输入框里的内容,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,复制文本。 注意: select() 方法只对 <input> 和 <textarea> 有效。
var obj= document.getElementById("demo");
obj.select(); 
document.execCommand("copy");
  • 如果是复制非输入框中的文本,则需先创建一个输入框,进行复制后,再清除这个输入框。
var input = document.createElement(‘input‘);
input.setAttribute(‘readonly‘, ‘readonly‘);
input.setAttribute(‘value‘, value);
document.body.appendChild(input);
input.select();
if (document.execCommand(‘copy‘)) {
    document.execCommand(‘copy‘);
}
document.body.removeChild(input);

完整兼容性代码:

用到的知识点:
1 window.getSelection:返回一个Selection对象,返回用户选择的文本范围或光标当前位置 参考链接
2 document.creatRange():创建一个range对象,选择结点范围 参考链接

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>测试复制粘贴功能</title>
</head>
<body>
	<div>
	<label>卡号:</label>
	<input type="text" size="20" name="IDCard" id="IDCard">
	<button class="copy" onClick="copy(‘IDCard‘)">复制</button>
</div>
<div>
	<label>用户名:</label>
	<input type="text" size="20" name="IDUserName" id="IDUserName">
	<button class="copy" onClick="copy(‘IDUserName‘)">复制</button>
</div>
<script type="text/javascript">
	function copy(type)
	{
		var textBox = document.getElementById(type);
		copyText(textBox);
	}
 
	function copyText(node) {
		if (!node) {
			return;
		}
		var result;
		var tempTextarea = document.createElement(‘textarea‘);
		document.body.appendChild(tempTextarea);
		if (typeof(node) == ‘object‘) {
			if (node.value) {
				tempTextarea.value = node.value;
			} else {
				tempTextarea.value = node.innerHTML;
			}
		} else {
			tempTextarea.value = node;
		}
		//判断设备
		var u = navigator.userAgent;
		if (u.match(/(iPhone|iPod|iPad);?/i)) {
			window.getSelection().removeAllRanges();
			var range = document.createRange();
			range.selectNode(tempTextarea);
			window.getSelection().addRange(range);
			result = document.execCommand(‘copy‘);
			window.getSelection().removeAllRanges();
 
		} else {   
			tempTextarea.select();
			result = document.execCommand(‘Copy‘);
		}
		document.body.removeChild(tempTextarea);
		if (result) {
			alert(‘复制成功‘, {
				removeTime: 1000
			})
		} else {
			alert(‘复制失败‘, {
				removeTime: 1000
			})
		}
 
		return result;
	}
</script>
</body>
</html>

 

ps:也可以使用clipboard.js等开源项目。

 

【JS】实现剪切板功能

标签:tar   char   移动   方法   append   链接   weixin   button   exe   

原文地址:https://www.cnblogs.com/JesseyWang/p/12950680.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!