获取剪贴板数据

兼容性：

 

获取剪贴板数据这块各个浏览器间存在很大的兼容性问题：

 

ie:

 

通过监听 paster 或 beforepaste ，在全局变量 clipboardData 中取得黏贴数据:

 

onpaste=function(){

alert(clipboardData.getData("Text"););

}

 

但局限性在于只能取得文本数据而不能取得富文本html.

 

 

firefox:

 

ff 提供了丰富的 api 接口，但需要用户提升权限 这一条就使得 ff 的 api形同虚设。

 

 

chrome:

 

支持 w3 clipboard api (借鉴 ie，不过 clipboardData 和事件关联)，可以随意取得 html/text 格式的剪贴板内容，十分方便：

 

 

onpaste=function(e){
e.clipboardData.getData("text/html"); // html 格式
e.clipboardData.getData("text/plain");// 纯文本格式
}

 

 

换个思路自己实现

 

其实可以完全绕开浏览器的剪贴板相关 api，经过一些 trick，可以取得用户的粘贴信息，主要关注以下事件：

 

beforepaste : ie only. 在黏贴的数据放到页面前触发，返回 false 则允许右键菜单有黏贴选项。

 

paste :

 

   ie : 黏贴的数据放到页面后触发。

   firefox/chrome : 黏贴的数据放到页面前触发。

 

 

主要实现思路为在将数据黏贴到 a 输入区域前，将焦点定位到隐藏的b输入区域，使得用户数据被黏贴在 b 区域，然后从 b 区域中取出处理后再填入 a 区域，并恢复焦点到 a 区域：

 

 

$("#a").on(ie?"beforepaste":"paste",function(e){		
		$("#b").text("");
		$("#b")[0].focus();
		setTimeout(function(){
			$("#a").text($("#b").text().replace(/[^\d]+/,""));
			$("#a")[0].focus();
		},0);
	});
});

 

这样就可以间接得取得剪贴板数据进行处理。

 

不过很有必要进行一些复杂的其它处理 ( 待续 )：对 a 进行选择区域位置的保存与恢复以及替换被黏贴的部分内容.

 

event paste demo @ google code

 

refer

 

http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser

http://msdn.microsoft.com/en-us/library/ms536905%28v=VS.85%29.aspx

https://developer.mozilla.org/en/DOM/element.onpaste

http://help.dottoro.com/ljxqbxkf.php

http://almaer.com/blog/supporting-the-system-clipboard-in-your-web-applications-what-a-pain