通过js控制input文本框输入文本类型
2016-09-12 22:49
351 查看
今天碰到一个小问题,要求限制文本框输入类型,特地分享给大家,文本框类型限制主要靠正则表达式。下面是我查找总结整理的例子。具体输入要求可以自己查一下正则表达式。
这里用到一个JavaScript 的String 对象replace方法。
/><br />只能输入数字,小数点:<input name="price" type="text" onkeyup="value=value.replace(/[^\d\.]/g,'')"><br /><br />只能输入数字,小数点,下划线:<input name="price" type="text" onkeyup="value=value.replace(/[^\d\._]/g,'')"><br /><br />只能输入英文和数字:<input onkeyup="value=value.replace(/[\W]/g,'')
" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"><br /><br />只能输入汉字:<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"><br
/><br />禁止输入法输入:<input type="text" style="ime-mode: disabled">无法切换输入法<br /><br />只能输入中文、英文、数字、@符号和.符号:<input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.]/g,'')"><br /><br />不能为空:<input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"><br
/><br />
但是当放到单独的js,要注意。这里需要用到jQuery 事件 - bind() 方法。bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
以下是我的js代码,仅供参考
附正则表达式:
这里用到一个JavaScript 的String 对象replace方法。
<h1>js验证输入框内容</h1> <br /> <br /> 只能输入0和1 <input type="text" onkeyup="value=value.replace(/[^01]/g,'')"> <br /> <br /> 只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> <br /> <br /> 只能输入英文,<pre name="code" class="html">无法粘贴,右键不会弹出粘贴菜单<input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onkeydown="fncKeyStop(event)" onpaste="return false" oncontextmenu="return false" /><br /><br />只能输入数字:<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"><br
/><br />只能输入数字,小数点:<input name="price" type="text" onkeyup="value=value.replace(/[^\d\.]/g,'')"><br /><br />只能输入数字,小数点,下划线:<input name="price" type="text" onkeyup="value=value.replace(/[^\d\._]/g,'')"><br /><br />只能输入英文和数字:<input onkeyup="value=value.replace(/[\W]/g,'')
" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"><br /><br />只能输入汉字:<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"><br
/><br />禁止输入法输入:<input type="text" style="ime-mode: disabled">无法切换输入法<br /><br />只能输入中文、英文、数字、@符号和.符号:<input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.]/g,'')"><br /><br />不能为空:<input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"><br
/><br />
但是当放到单独的js,要注意。这里需要用到jQuery 事件 - bind() 方法。bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
以下是我的js代码,仅供参考
var init = function(){ document.getElementB document.getElementById("inits").style.display="none"; var input = document.getElementsByTagName("input").length; var length = input/7; for(var i=0;i<length;i++){ document.getElementById('S'+(i+1).toString()).value; if(document.getElementById('S'+(i+1).toString()).value == '1'){ //document.getElementById('add'+(i+1).toString()).placeholder="格式为字母或数字的组合。"; $('#add'+(i+1).toString()).bind("mouseover",function(){ this.value = this.value.replace(/[^\d]/g,''); }); }else if(document.getElementById('S'+(i+1).toString()).value == '2'){ //document.getElementById('add'+(i+1).toString()).placeholder="是请输入1,否请输入0。"; $('#add'+(i+1).toString()).bind("mouseover",function(){ this.value = this.value.replace(/[^01]/g,''); }); }else{ document.getElementById('add'+(i+1).toString()).disabled=true; document.getElementById('add'+(i+1).toString()).placeholder="禁止输入!"; } } }
附正则表达式:
[\u4e00-\u9fa5] //匹配中文字符 ^[1-9]\d*$ //匹配正整数 ^[A-Za-z]+$ //匹配由26个英文字母组成的字符串 ^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串 ^[a-z]+$ //匹配由26个英文字母的小写组成的字符串 ^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
相关文章推荐
- JS入门之arguments对象
- javascript中如何创建二维数组
- js实现百叶窗
- JS基础知识点
- javascript网页特效——日期和时间
- JavaScript笔记:DOM2 & DOM3
- shh框架返回json数据给前台
- 几个关于父元素、子元素的常用的js选择器
- 关于跨域的总结
- js遍历class
- javascript实现风车效果
- javascript网页特效——导航菜单
- javascript实现七屏百叶窗效果
- ExtJS 4.2 组件的查找方式
- javascript_basic_02之数据类型、分支结构
- 实现淘宝放大镜的两种方式
- PHP javascript 值互相引用的问题
- 记录学习的点滴(Js 数组)
- Json---Windows下使用Jsoncpp
- 案例研究:图片库改进版(js dom编程艺术第六章笔记)