600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > html输入框只能输入文字 input文本框强制输入指定文字的方法以及IE11的兼容

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

时间:2023-07-18 18:11:06

相关推荐

html输入框只能输入文字 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的地方;文中提到的是韩文校验,也可以替换成其他语言,根据自己项目中的具体需求进行修改即可;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。