资讯专栏INFORMATION COLUMN

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

CKJOKER / 3476人阅读

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

背景:最近开发的韩国项目,在用户姓名输入框一栏中,要求只能输入韩文,通常用到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常用样式与web移动端资源

    摘要:不允许负值用百分比来定义缩放比例。解决这个很简单,在父元素中使用即可解决该。列宽度由单元格内容设定。定义仅有大写字母。不过,要让任何元素生效还得借助于一点点。 css/css3常用样式 CSS修改选中文字的颜色 html代码: 第一段文字选中效果 第二段文字选中效果 css代码: .p1::selection{background:red;color:#fff;} .p2::selec...

    The question 评论0 收藏0
  • 【译】原生表单组件

    摘要:文本输入框文本输入框是最基本的表单组件,它便于用户输入各种数据。对大多数表单组件而言,表单提交后所有具有属性的组件都会被提交,即使它们没有获值。重置按钮用于重置所有表单组件为默认值。 系列文章说明 原文 HTML表单是由组件构成的,这些组件是各种浏览器都支持的内置控件。本文中我们将深入探讨它们、了解它们的作用、学习如何让各种浏览器更好地支持它们。 虽然这里我们只探讨内建表单组件,但...

    sunnyxd 评论0 收藏0
  • WEB前端面试题整理(一)

    摘要:响应禁止包含消息体,因此始终以消息头后的第一个空行结尾。删除并返回数组的最后一个元素。返回该对象的源代码。优雅降级一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 WEB前端面试题的记录(一) 1、获取非行间样式的函数: function getStyle(obj, attr){ if (obj.currentStyle) { return obj.current...

    hoohack 评论0 收藏0

发表评论

0条评论

CKJOKER

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<