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的地方;文中提到的是韩文校验,也可以替换成其他语言,根据自己项目中的具体需求进行修改即可;
html输入框只能输入文字,input文本框强制输入指定文字的方法以及IE11的兼容相关推荐
- 使input文本框不可编辑的3种方法
转自点击打开链接 今天试了一下使input文本框不可编辑的3种方法,现在总结一下: disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能 ...
- HTML -- 使input文本框不可编辑的2种方法(有disabled属性的input框,后台获取不到值)
1. 使input文本框不可编辑的2种方法 今天在写JSP的时候我写了这样的代码 updateBook.jsp <form action="${pageContext.request. ...
- java 文本域不可编辑_实现表单input文本框不可编辑的三种方法
问题 有时,我们需要以不可编辑的模式显示表单域,那么如何实现?我们可以通过为表单字段(input文本框,标签,复选框,文本区域)设置以下方法来实现表单的不可编辑功能. 实现方式 1.οnfοcus=t ...
- HTML输入标签 input —— 文本框
文本框--text text属性用来设定在表单的文本框里,可以向其中输入任何类型的文本.数字或字母. <input type="text" name="控件的名称& ...
- 给input文本框添加灰色提示文字
大家都见到很多网站的文本框都有灰色提文字,一点即消失,鼠标一开又出现(没填写状态下)用下面这段短短的代码就可以实现啦! 将这段代码加载input 中! value="你的提示文字" ...
- input文本框中添加提示文字,输入后自动消失
<input placeholder="提示文字"/> 效果: 如果小博的文章对你有所帮助,欢迎点赞留言关注!!!
- input文本框实现输入英文时自动触发事件,输入中文时要输入完成后才触发事件
需求: 英文(英文输入法): 每输入一个字母都触发一次事件; 中文(拼音输入法): 输入完成后才触发事件,不是每打一个拼音就触发 实现: $(function(){var flag = true;$( ...
- input 文本框不可编辑的3种方法
disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值.设置后文字的颜色会变成灰色.disabled 属性无 ...
- HTML-input文本框(添加提示文字,填写内容时消失)
input文本框内添加提示文字,填写内容时消失: 用placeholder属性作为提示语 <input placeholder="提示语..."></input& ...
最新文章
- Web 前端,易学难精,没有拿手的实战项目,怎么办?
- DPDK KNI实现(二十五)
- PWA 可用性检测工具
- 给ubuntuGedit安装gedit-source-code-browser
- IBM 2013策略发布:大数据和分析、云计算、企业移动、社交商务、智慧商务、智慧城市...
- 元素位置及宽度的计算总节
- 异常检测算法分类及经典模型概览
- SpringBoot实战教程(8)| 整合mybatis-plus
- 如何在Java客户端调用RESTful服务
- [置顶] Web开发百宝箱——提升网站档次的时尚 jQuery 图片滚动插件
- KY RD9700_USB网卡驱动
- eclipse 启动失败,出现hs_err_pid972.log类文件,文件中含JavaThread Bundle File Closer daemon类内容
- ERD Online 4.0.0新版本震撼来袭,超强国产免费在线数据建模系统
- 工厂模式C++实现(三种工厂模式附详细注释)
- 异常处理(六)--------SpringBoot+Maven项目运行异常:Unable to find a single main class from the following candidat
- 智能ABC输入法的巧用
- Android手机静态ip地址网关,安卓手机Android 4.0系统静态ip设置方法【详解】
- HPE脚本更新致京都大学77TB数据被删
- 第十一届蓝桥杯省赛真题——单词分析
- javascript面对对象编程指南第三章 函数