资讯专栏INFORMATION COLUMN

限制 input 输入框只能输入xxx

AlphaGooo / 1092人阅读

摘要:限制输入框只能输入使用事件,有,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母使用事件,在输入内容后,只有丧失焦点时才会得到结果,并不能在输入时就做出响应使用事件,完美的解决了以上两种问题,测试暂时还没有出现其它问题。

限制 input 输入框只能输入xxx

使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母

使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应

使用 oninput 事件,完美的解决了以上两种问题,测试暂时还没有出现其它问题。

原理就是在输入时会触发事件,事件会通过字符替换和正则表达式将不符合规范的替换掉(删除掉)

输入大小写字母、数字、下划线:
 
输入小写字母、数字、下划线:
 
输入数字和点

输入中文:
  

输入数字:
  

输入英文:
  

输入中文、数字、英文:
  

输入数字和字母:
  
只能输入英文字母和数字,不能输入中文

只能输入数字和英文


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54031.html

相关文章

  • 限制 input 输入只能输入xxx

    摘要:限制输入框只能输入使用事件,有,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母使用事件,在输入内容后,只有丧失焦点时才会得到结果,并不能在输入时就做出响应使用事件,完美的解决了以上两种问题,测试暂时还没有出现其它问题。 限制 input 输入框只能输入xxx 使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母 使用...

    wenyiweb 评论0 收藏0
  • 动手写个数字输入1:input[type=number]的遗憾

    摘要:前言最近在用封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方。的值除了影响微调按钮的步长外,还影响表单验证信息。 前言  最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历: 《动手写个数字输入框1:input[type=number]的遗憾》 《动手写个数字输入框2:起手式——拦截非法...

    ShevaKuilin 评论0 收藏0
  • Vue中结合ElementUI实现:限制输入只能输入正整数

    摘要:中结合实现限制输入框只能输入正整数如果觉得对您有所帮助,麻烦您动动您的小手指给点个赞呗中禁止输入小数和负数只允许输入正整数做法一利用禁止按键的方法,主要是依靠禁止按下减号以及小数点来完成的首先要监听键盘按下事件,因为上面的组件监听事件是没有 Vue中结合ElementUI实现:限制输入框只能输入正整数 如果觉得对您有所帮助,麻烦您动动您的小手指给点个赞呗(*^▽^*) input中禁止...

    iamyoung001 评论0 收藏0

发表评论

0条评论

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