通过js巧妙获取剪切板的内容

前两天探究一个直接从Excel中复制数据到html中的实现方法。现在很多html编辑器都实现了表格的复制,但是如果不借助编辑器,如何将Excel中的数据复制到html中对应的table呢?

基本的思路就是获取到复制的内容,然后解析并填入相应的位置中。首先想到的是通过js获取剪切板的内容,可惜的是,在浏览器中通过js获取剪切板的内容是被限制的。另外的一种方法,是通过flash去获取,这种方法可以避开浏览器的安全限制,然而,flash这种正在逐渐被抛弃的技术,还是少用为妙。

上网搜了一下,找到了一种较为巧妙地方法。先上demo代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEMO</title>
<script type="text/javascript">
function cellkeydown(event) {
	if (event.ctrlKey && event.keyCode == 86) {
		var ss = document.getElementById("textArea");
		ss.focus();
		ss.select();
		// 等50毫秒,keyPress事件发生了再去处理数据
		setTimeout("dealwithData()",50);
	}
}
function dealwithData(event) {
	var ss = document.getElementById("textArea");
	alert(ss.value);
	ss.blur();
}
</script>
</head>
<body onkeydown="return cellkeydown(event)">
	<textarea id="textArea"></textarea>
</body>
</html>

首先在body上注册了onkeydown事件,当用户按下ctrl+v键的时候,js将焦点转移到一个textarea标签上,这样,接下来的keyPress和keyUp事件就发生在textarea上了,自然而然的就相当于用户在textarea中复制了一下,然后,js再将焦点转移,从textarea中将值取到。这样就取到了剪贴板内文本数据了。

获得的Excel的文本数据,按照\t,\n就可以分割得到格子和行信息了。

简单而巧妙地方法,Mark之

分享到:

发表评论

昵称

沙发空缺中,还不快抢~