获取剪贴板数据
by
at 2011-11-07 23:31:57
original http://yiminghe.iteye.com/blog/1240853
兼容性：
获取剪贴板数据这块各个浏览器间存在很大的兼容性问题：
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
<br><br>
<span style="color:red">
<a href="http://yiminghe.iteye.com/blog/1240853#comments" style="color:red">已有 <strong>0</strong> 人发表留言，猛击->><strong>这里</strong><<-参与讨论</a>
</span>
<br><br><br>
ITeye推荐