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

迷南。 2022-05-29 22:08 161阅读 0赞

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" οnkeyup="value=value.replace(/[^\d]/g, '')"/><br />

直接如此即可。

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 antd input 只允许输入数字和小数点

问题描述项目中需要限制 input 只能输入数字和小数点，并且限制到小数点后2位解决方法使用 Form.Item 中的 getValueFromEven

港控/mmm°/ 2024年03月26日 13:08/ 0 赞/ 117 阅读

相关 Vue中实现input输入框字数限制

先放效果图: ![在这里插入图片描述][20210130100910946.png] vue代码如下: <el-form-item label="活动标题"

分手后的思念是犯贱/ 2022年10月24日 15:27/ 0 赞/ 459 阅读

相关 input输入框中只允许输入数字

<input οnkeyup="if(this.value.length==1){ this.value=this.value.replace(/[^1

缺乏、安全感/ 2022年09月29日 06:35/ 0 赞/ 284 阅读

相关控制input只允许输入数字

`` 好多时候我们是希望能设置input只能输入数字；比如说商城选择商品数量；比如说手机号等等；看了下京东和天猫；天猫选择商品数量是只能输入数字；而且数量不能小于1；

旧城等待，/ 2022年07月13日 10:52/ 0 赞/ 209 阅读

相关 input 只允许输入数字

一： onkeypress事件是不允许任何非数字字符 <input type="text" οnkeypress="return event.keyCode>=4

布满荆棘的人生/ 2022年06月16日 11:08/ 0 赞/ 296 阅读

相关控制input标签只能输入数字

<input type="text" οnkeyup="value=value.replace(/\[^\\d\]/g,'')" placeholder="请手动输入

雨点打透心脏的1/2处/ 2022年06月11日 07:48/ 0 赞/ 269 阅读

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

id:<input type="text" name="id" id="id" > <span style="display:none;border:0" i

迷南。/ 2022年05月29日 22:08/ 0 赞/ 162 阅读

相关控制input框输入数字

1.只能输入正整数 <input type="text" οnkeyup="if(this.value.length==1){this.value=this.val

男娘i/ 2022年05月25日 07:21/ 0 赞/ 326 阅读

相关 input输入框只能输入数字

<input type="number" class="input-control input-l" id="oldcard" oninput = "value=val

骑猪看日落/ 2022年02月01日 13:09/ 0 赞/ 421 阅读

相关 input输入框只能输入数字、小数及负数

使用js控制input输入框只能输入数字、小数及负数，通过监听键盘事件触发js方法实现。代码如下： //input框 <input type="text

刺骨的言语ヽ痛彻心扉/ 2021年06月24日 16:09/ 1 赞/ 1624 阅读