您的位置:首页 > Web前端 > JavaScript

通过js控制input文本框输入文本类型

2016-09-12 22:49 351 查看
今天碰到一个小问题,要求限制文本框输入类型,特地分享给大家,文本框类型限制主要靠正则表达式。下面是我查找总结整理的例子。具体输入要求可以自己查一下正则表达式。

这里用到一个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个英文字母组成的字符串
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: