场景

<input type="text"  maxlength="5" />   //可以

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

如果为number怎样控制输入长度

解决

<input type="number" oninput="if(value.length>4) value=value.slice(0,4)" />

添加oninput事件，用js进行判断，如果长度大于4位，则截取前四位。

如果还要添加别的验证规则比如保留两位小数或者实现数字的自动计算，可以

oninput="rs(this.value);if(value.length>4) value=value.slice(0,4)"

其中rs()是其他要执行的操作，注意中间加；

还要注意执行的顺序。

Input为number类型maxlength不好使，用js轻松解决相关推荐

解决 html5 input type='number' 类型可以输入e
当给 input 设置类型为 number 时,比如,我想限制,只能输入 0-9 的正整数,正则表达式如下: /^[0-9]?$/ // 匹配 0-9 的整数且只匹配 0 次或 1 次用正则测试,小 ...
原生前端：input标签 number类型输入框如何清除上下加减按钮？
<input type="number"><style>input::-webkit-outer-spin-button,input::-webkit-in ...
解决input[type=number]无法显示非数字字符的问题
在移动端webview实现的页面中,有数字的地方必须使用input type="number"类型的input,否则触发后的键盘为全键盘,而非数字键盘.但另外的一个问题是,inpu ...
项目总结（input输入框type设置为number，maxlength无效，设置为tel，maxlength有效）
这是一个小细节,以前很少注意,直到最近做的一个项目,当我把一个输入数字的input框的类型设置为number时,input框还是可以无限输入,设置maxlengh=10就不起作用了,然后我就去百度了一 ...
征服number类型的input框
在移动端H5页面开发中,有时候会有一些数值输入方面的需求.如果需要让用户比较方便地输入小数.负数,最简单的方式是使用number类型的input框,输入时软键盘会切换为数字键盘方便输入(ios是带数字 ...
input type=number maxlength无效
问题:input标签type=number时maxlength属性无效解释:通过在MDN上搜索得知maxlength属性是控制value的最大长度(最多字符数目),maxlength属性对于type ...
input输入框type设置为number，maxlength无效
<input type="number">时,maxlength无效 type设置为text.tel,maxlength才有效解决方案 <input type= ...
input改为number类型，去掉上下箭头
input框只能输入的是number类型的内容,所以我直接写成了 type="number" ,虽然实现了这个功能,但input框后面出现了上下箭头,看起来巨丑无比! 只要在css ...
html文本框有个小箭头,去掉input(number类型)输入框箭头的方法教程
在web前端中,number类型的input输入框在获得鼠标焦点的情况下,会出现两个向上和向下的箭头.虽然箭头可用于input输入框中的数字增大和减小,但在某些特定的场景中反而会让用户产生错乱的感觉. ...

Input为number类型maxlength不好使，用js轻松解决

场景

解决

Input为number类型maxlength不好使，用js轻松解决相关推荐

最新文章

热门文章