井井客

搜索

JS复制到剪切板(火狐浏览器还需调试)

点击按钮将指定ID的元素value值通过JS复制到剪切板,大部分浏览器兼容,火狐还需观察,指定的元素最好是表单中的input元素(考虑到js在IE兼容)。

JS复制到剪切板(火狐浏览器还需调试)

这是之前在工作中用到的一段小功能。需求是点按钮,可以将前面的QQ号码复制,JS代码主要是从网上百度的,然后加上了一些自己的小修改,效果在预期以内,还算不错~

具体代码如下:

<html>
<head>
<meta charset="utf-8">
<title>JS复制到剪切板,火狐浏览器还需调试</title>
<style>
* { padding:0; margin:0; border:0;}
input,span { float:left; height:18px; padding:5px 10px; line-height:18px;}
input { border:1px solid #ccc;}
span { background:#F30; color:#fff; border:1px solid #F00; cursor:pointer;}
</style>
</head>
<body>
<input value="1234567" type="text" id="copyt01" />
<span onclick="copytext('copyt01')">复制</span>
<script type="text/javascript">
//复制到剪切板
function copytext(id){
	textSelect(document.getElementById(id));
}
var textSelect = function(o){
	var l = o.value.length;
	if(l){
		if(o.createTextRange){//IE浏览器
			var range = o.createTextRange();
			range.moveStart("character",-l);
			range.moveEnd("character",-l);
			range.moveStart("character", 0);
			range.moveEnd("character",l);
			range.select();
			range.execCommand("Copy");
			alert('已成功复制!');
		}else{
			o.setSelectionRange(0, l);
			o.focus();
			if(document.execCommand('Copy')){
				document.execCommand('Copy','false',null);
				alert('已成功复制!');
			}else{
				alert('浏览器无法访问您的剪切板,请您手动ctrl+C进行复制');
			}
		}
	}
};
</script>
</body>
</html>

百度了很多种方法,也试过几种JS,最终还是自己动手,丰衣足食!

需要注意的是,为了保证这段JS在Ie的兼容性,将 要复制的内容尽量是写在input的value中才可以。

距离整理编写这段JS代码的时间已经过去几个月了,所以有点不太记得清了。这次在整理这段JS代码的时候又想到,不知道能否使用用JQ通过.html来获取文本,因为现在使用的是JS中的.value属性,局限了IE中,只有表单元素value值才有效。
有时间倒可以试试改变一下这个“JS复制到剪切板”。

文章TAG:js

作者:井井客整理来源:互联网
本文标题:JS复制到剪切板(火狐浏览器还需调试)
本文链接:/c/3019.html

上一篇:DW批量替换a标签链接修为#
下一篇:jquery倒计时10S后跳转到新页面

文章分类

相关阅读

随便看看