input文本框强制输入指定文字的方法以及IE11的兼容

42次阅读

共计 1253 个字符，预计需要花费 4 分钟才能阅读完成。

背景：最近开发的韩国项目，在用户姓名输入框一栏中，要求只能输入韩文，通常用到 onkeyup 和 onafterpaste 两个事件来触发方法，并在方法中进行校验，但是在 IE 浏览器中，出现了一种情况，就是韩文单词拼写未完成的时候，会直接进行校验并显示，如下图实例所展示，并不是需要想要的结果，所以需要进行 IE 兼容；

记录一下整个流程：
标签绑定事件
<input type=”text” v-model=”name” @keyup=”keyup($event)” @afterpaste=”keyup($event)”>
标签绑定了 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 获取当前浏览器信息；