限制 input 输入框只能输入xxx

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

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

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

<input type="text" oninput="value=this.value.replace(/[^\w_]/g,'');"> 

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

<input type="text" oninput="value=this.value.replace(/[^a-z0-9_]/g,'');"> 

输入数字和点

<input type="text" oninput="value=value.replace(/[^\d.]/g,'')">

输入中文:

<input type="text" oninput="value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">  

输入数字:

<input type="text" oninput="value=this.value.replace(/\D/g,'')">  

输入英文:

<input type="text" oninput="value=this.value.replace(/[^a-zA-Z]/g,'')">  

输入中文、数字、英文:

<input oninput="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">  

输入数字和字母:

<input oninput="value=value.replace(/[\W]/g,'')">  

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

<input oninput="value=value.replace(/[^\w\.\/]/ig,'')">

只能输入数字和英文

<input oninput="value=value.replace(/[^\d|chun]/g,'')">

[转载]原文链接:https://segmentfault.com/a/1190000019492951

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67451.html

文章标题:限制 input 输入框只能输入xxx

相关文章
微信公众号实现无限制推送模板消息!可向指定openID群发
微信认证的服务号才有推送模板消息接口 所以本文需要在认证服务号的情况下学习 以上就是模板消息,只有文字和跳转链接,没有封面图。 在服务号的后台添加功能插件-模板消息即可。 模板消息,都是在后台选择一个群发模板的,然后获取模板ID,根据这...
2018-01-14
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
2015年Web:追求原有“框架”外的新功能
Web目前正在经历一场巨大的变化,ServiceWorkers、传感器访问、推送通知等方式将打破Web原有的框架。而在2015年我们可以利用这几种方式快速的改变自己的网站。在不断增多的Web功能中寻求最合适自己的功能。 Web最初的设想是一...
2015-11-12
ajax分页效果(bootstrap模态框)
ajax分页效果图: 上干货: &#x2F;** * ajax分页 *&#x2F; $(function(){ $(&quot;.modal-body&quot;).find(&quot;.pagination&quot;...
2017-02-20
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
js实现点击文本框显示日期选择器特效代码分享
本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下: 三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图: 具体代码如下: &lt;head&gt; &lt;meta htt...
2017-03-29
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
大家在做些页面的时候,很多都是用ajax实现的,在显示的时候有很多表单提交的add或者update操作,显然这样很烦,突然想到了一个比较好的方法,下面给大家分享下如何用js 实现依赖注入的思想,后端框架思想搬到前端来。 应用场景: 前后端一...
2017-03-29
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
javascript框架设计之类工厂
类与继承在javascript的出现,说明javascript已经达到大规模开发的门槛了,在之前是ECMAScript4,就试图引入类,模块等东西,但由于过分引入太多的特性,搞得javascript乌烟瘴气,导致被否决。不过只是把类延时到E...
2017-03-24
利用VUE框架,实现列表分页功能示例代码
先来看一下效果图: 功能描述: 1. 点击页面序号跳转到相应页面; 2. 点击单左/单右,向后/向前跳转一个页面; 3. 点击双左/双右,直接跳转到最后一页/第一页; 4. 一次显示当前页面的前三个与后三个页面; 5. 始终显示最后一...
2017-03-11
回到顶部