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

jquery 实现input只输入数字及控制输入字数

2018-02-27 17:26 519 查看
id:<input  type="text" name="id" id="id" >
<span style="display:none;border:0" id="t1" >请输入数字</span>
<script type="text/javascript">
$("#id").keyup(function(){
var c=$(this);
if(/[^\d]/.test(c.val())){
var temp=c.val().replace(/[^\d]/g,'');
$(this).val(temp);
$("#t1").css({'display':'block'});
}else{
$("#t1").css({'display':'none'});
}
</script>
这样就实现了输入框里只能输入数字,当输入的不是数字时就会提示 “输入数字”并清空输入框里的内容。
控制输入长度也类似用户名:<input type="text" name="username" id="username" >
<span style="display:none;border:0;float:right;margin-right:50px" id="t2" >用户名长度为3-6位</span>
$("#username").blur(function(){

var d=$(this);
if(d.val().length<3||d.val().length>6){

$(this).val('');

$("#t2").css({'display':'block'});
}else{
$("#t2").css({'display':'none'});
}
})
.blur事件是失去焦点事件,当输入框失去焦点即光标移出输入框就会执行此函数
.val()是jq获取元素的值的函数
如果不用jq,实现input只输入数字方法如下:id:<input type="text" name="id" id="id" onkeyup="value=value.replace(/[^\d]/g, '')"/><br />直接如此即可。

       
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jQuery java