最近做ie,谷歌兼容的时候发现ie浏览器的paste事件失效了,百度个浏览器下paste事件差别才发现:
- 谷歌浏览器paste事件可以绑定在任意div
- 火狐和ie的paste事件只能绑定在可编辑的div上,所以要解决这可个问题,给div加上contenteditable=true就好了。
<div contenteditable=true></div>
但是这样破坏了div就会很丑,而且加入了不需要的功能。于是为了更进一步的解决这个问题。我百度发现可以使用ctrl+v键盘绑定事件,
注意是绑定键盘事件的div必须是可聚焦的。
给div加入tabindex=“-1”即可聚焦
<div class="pool-getIn-grid-box paste-grid " tabindex="-1"></div>
$("#pool-paste-grid-box").on('keypress',function (e) {
e.preventDefault();
e.stopPropagation();
if ( (e.keyCode == 22 || e.which == 22) && e.ctrlKey){
alert("粘贴事件")
}
})
其中,keycode==22是判断v键,ctrlKey是判断ctrl。
如果要兼容谷歌和ie的话建议的写法是:
//ie粘贴事件
$("#pool-paste-grid-box").on('keypress',function (e) {
e.preventDefault();
e.stopPropagation();
alert(e.which)
if ( (e.keyCode == 22 || e.which == 22) && e.ctrlKey){
alert("ie下的粘贴事件")
})
//谷歌粘贴事件
$("#pool-paste-grid-box").on('paste', function (e) {
alert("谷歌下的粘贴事件")
});
一起写,这样不管是谁都可以是实现了。