input number 数字输入限制

发布时间 2023-04-13 16:57:19作者: shiberhou

转自:https://blog.csdn.net/qq_43535970/article/details/127516919

input number 数字输入限制,最大值最小值输入范围限制
前言
有时候我们会有一些需求限制输入数字的大小,比如一个24小时数字输入框,7天数字输入框等等,这个时候我们就需要单独进行处理了。

解决方案
我看了看网上,解决方案不少,总结了一下,有以下几种方式。
方式一: max=“10”,min=“1” 限制最大值为10,最小值为1
这种方法非常便捷,但值得注意的是,这种方式限制的是数字输入框右边的增减箭头按钮,最大值和最小值,不能对手动输入的数进行限制。如果手动输入一个大于100或小于10的数,还是无法限制。

<input type="number" max="100" min="10" value="">
1
方式二:
使用input标签的oninput方法,在输入时进行监听,当判断打到某个条件时,进行处理将值替换成我们想要的数值。
// 限制长度:输入三位数的数字

<input type="number" oninput="if(value.length>4)value=value.slice(0,4);" />
1
// 限制大小 大于等于0 但小于等于24的整数
<input type="number" oninput="if(value<=0)value=0;if(value>=24)value=24;value=parseInt(value)" />

 

*******************************************************************************************************************************************

 

转自:https://blog.csdn.net/weixin_64630810/article/details/126836748

1、限制input最大长度
<input type="text" maxlength="5" /> //可以

<input type="number" maxlength="5" /> //没有效果

<input type="number" οninput="if(value.length>5) value=value.slice(0,5)" /> //js控制,可以

<input type="tel" maxlength="5" /> //tel类型,可以

此外,tel类型的input在ios上会调出全数字键盘,而number类型的input则会调出带有标点符号的键盘。

2、限制input输入框为纯数字:

a、onkeyup = "value=value.replace(/[^\d]/g,'')"

使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母

b、onchange = "value=value.replace(/[^\d]/g,'')"

使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应

c、oninput = "value=value.replace(/[^\d]/g,'')"

使用 oninput 事件,完美的解决了以上两种问题,暂时还没有出现其它问题。
————————————————
版权声明:本文为CSDN博主「A-炜晨科技」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_64630810/article/details/126836748