摘要：背景最近开发的韩国项目，在用户姓名输入框一栏中，要求只能输入韩文，通常用到和两个事件来触发方法，并在方法中进行校验，但是在浏览器中，出现了一种情况，就是韩文单词拼写未完成的时候，会直接进行校验并显示，如下图实例所展示，并不是需要想要的结果，
背景：最近开发的韩国项目，在用户姓名输入框一栏中，要求只能输入韩文，通常用到onkeyup和onafterpaste两个事件来触发方法，并在方法中进行校验，但是在IE浏览器中，出现了一种情况，就是韩文单词拼写未完成的时候，会直接进行校验并显示，如下图实例所展示，并不是需要想要的结果，所以需要进行IE兼容；
记录一下整个流程：
标签绑定事件标签绑定了onkeyup键盘抬起事件以及onafterpaste粘贴文本进输入框两个事件，当有这两个操作时，就会触发相应的校验方法；
校验方法keyup (ev) {
if (!this.imeStatus) {
ev.target.value = ev.target.value.replace(/[^ㄱ-ㅎㅏ-ㅣ가-힣A-Za-z0-9]/g, "")
}
},
当事件触发时，首先会有个变量imeStatus校验是否是IE浏览器，然后再根据正则校验进行输入框值的替换，注意：替换的应该是当前正在输入的值，并非整个输入框包括已经输入的所有值；
if (getBrowser() === "IE") {
window.addEventListener("compositionstart", () => {
this.imeStatus = true
}, false)
window.addEventListener("compositionend", () => {
this.imeStatus = false
}, false)
}
IE浏览器的校验：如果是IE浏览器，则对输入法事件进行监听，在输入法录入开始时，变量imeStatus为true，当前输入的值不进行校验，当输入法输入结束事件触发时，说明拼写完成，变量imeStatus为false,进行校验当前拼写输入完成的单词；
function getBrowser () {
const userAgent = navigator.userAgent
if (userAgent.indexOf("OPR") > -1) {
return "Opera"
}
if (userAgent.indexOf("Firefox") > -1) {
return "FF"
}
if (userAgent.indexOf("Trident") > -1) {
return "IE"
}
if (userAgent.indexOf("Edge") > -1) {
return "Edge"
}
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome"
}
if (userAgent.indexOf("Safari") > -1) {
return "Safari"
}
}
对浏览器的判断：navigator.userAgent获取当前浏览器信息；
以上就是我在项目开发过程中遇到的需要兼容IE的地方；文中提到的是韩文校验，也可以替换成其他语言，根据自己项目中的具体需求进行修改即可；
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102436.html
摘要：不允许负值用百分比来定义缩放比例。解决这个很简单，在父元素中使用即可解决该。列宽度由单元格内容设定。定义仅有大写字母。不过，要让任何元素生效还得借助于一点点。 css/css3常用样式 CSS修改选中文字的颜色 html代码： 第一段文字选中效果 第二段文字选中效果 css代码： .p1::selection{background:red;color:#fff;} .p2::selec...
摘要：响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。删除并返回数组的最后一个元素。返回该对象的源代码。优雅降级一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 WEB前端面试题的记录（一） 1、获取非行间样式的函数： function getStyle(obj, attr){ if (obj.currentStyle) { return obj.current...
阅读 963·2021-11-22 13:52
阅读 901·2019-08-30 15:44
阅读 554·2019-08-30 15:43
阅读 2403·2019-08-30 12:52
阅读 3453·2019-08-29 16:16
阅读 613·2019-08-29 13:05
阅读 2925·2019-08-26 18:36
阅读 1913·2019-08-26 13:46
