ie浏览器paste事件失效

最近做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("谷歌下的粘贴事件")
        });

一起写,这样不管是谁都可以是实现了。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值