获取剪贴板数据这块各个浏览器间存在很大的兼容性问题:
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
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
这个是flash的,