input文本框强迫输入指定笔墨的要领以及IE11的兼容

背景：近来开辟的韩国项目，在用户姓名输入框一栏中，请求只能输入韩文，一般用到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的处所；文中提到的是韩文校验，也能够替代成其他言语，依据本身项目中的详细需求举行修正即可；