教你如何解决IE9的输入框input事件无法监听右键菜单的剪切、撤销、删除对内容的改变的问题

沈建明发布于2019-08-23 14:04 / 1271人阅读

摘要：原来对全局的事件进行监听，一旦发现就会尝试触发当前文档激活对象的事件。事件需要注意的点事件只能绑定在接口对象上，其他元素绑定无效，而且不可以取消也不能冒泡需要注意的是上右键菜单的剪切并不会触发事件浏览器从开始支持相关文档

文章起因

看Vue源代码内置指令时，发现了Vue对于IE9的selectionchange事件做了特殊处理，这引起了我的兴趣。原来Vue对全局的selectionchange事件进行监听，一旦发现就会尝试触发document.activeElement当前文档激活对象的input事件。
具体代码如下：

src/core/util/env.js

export const inBrowser = typeof window !== "undefined"
export const UA = inBrowser && window.navigator.userAgent.toLowerCase()
export const isIE = UA && /msie|trident/.test(UA)
export const isIE9 = UA && UA.indexOf("msie 9.0") > 0

src/platforms/web/runtime/directives/model.js

if (isIE9) {
  document.addEventListener("selectionchange", () => {
    const el = document.activeElement
    if (el && el.vmodel) {
      trigger(el, "input")
    }
  })
}
function trigger (el, type) {
  const e = document.createEvent("HTMLEvents")
  e.initEvent(type, true, true)
  el.dispatchEvent(e)
}

为什么要这样兼容

原来IE9输入框input事件无法监听到键盘的backspace键和delete键对内容的改变，以及右键菜单的剪切、撤销、删除对内容的改变，用keyup事件我们可以解决键盘backspace键delete键的问题，但是对于右键对于文本的操作还是无能为力，还好有selectionchange事件，它可以在文档上的当前文本选择被改变时触发，例如文本选择、剪切、删除、粘贴等操作。

selectionchange事件需要注意的点

selectionchange事件只能绑定在Document接口对象上，其他元素绑定无效，而且不可以取消、也不能冒泡；

需要注意的是Chrome上右键菜单的剪切并不会触发selectionchange事件；

IE浏览器从IE9开始支持；

相关文档

selectionchange

DocumentOrShadowRoot.activeElement

云服务器 GPU云服务器 js设置输入框的事件解决阿里云服务器无法访问80端口的问题 js的禁止输入框输入 python的输入框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100035.html

input标签内容改变触发的事件

摘要：原生方法事件事件在内容改变且失去焦点的时候触发。直接更改值时不触发事件事件在输入内容改变的时候实时触发。与联合使用是的标准事件，对于检测和这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像事件需要失去焦点才触发。原生方法 onchange事件 function onc(data){ console.log(data.value); } onchang...

sanyang 2019-08-26 13:22 评论0 收藏0
前端er怎样操作剪切复制以及禁止复制+破解等

摘要：取消默认的复制事件被复制的文字等下插入防知乎掘金复制一两个字则不添加版权信息超过一定长度的文字就添加版权信息作者链接来源掘金著作权归作者所有。以上参考资料高程操作剪贴板网页上如何实现禁止复制粘贴以及如何破解原生实现点击按钮复制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

mikasa 2019-08-29 16:20 评论0 收藏0
前端er怎样操作剪切复制以及禁止复制+破解等

摘要：取消默认的复制事件被复制的文字等下插入防知乎掘金复制一两个字则不添加版权信息超过一定长度的文字就添加版权信息作者链接来源掘金著作权归作者所有。以上参考资料高程操作剪贴板网页上如何实现禁止复制粘贴以及如何破解原生实现点击按钮复制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

amuqiao 2019-08-23 10:51 评论0 收藏0
前端er怎样操作剪切复制以及禁止复制+破解等

摘要：取消默认的复制事件被复制的文字等下插入防知乎掘金复制一两个字则不添加版权信息超过一定长度的文字就添加版权信息作者链接来源掘金著作权归作者所有。以上参考资料高程操作剪贴板网页上如何实现禁止复制粘贴以及如何破解原生实现点击按钮复制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

DevTalking 2019-08-02 11:11 评论0 收藏0