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

背景：最近开发的韩国项目，在用户姓名输入框一栏中，要求只能输入韩文，一般用到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获取当前浏览器信息；

---

以上就是我在项目开发过程当中遇到的须要兼容IE的地方；文中提到的是韩文校验，也能够替换成其余语言，根据本身项目中的具体需求进行修改便可；