解决：input框当type为number时maxlength失效

最新推荐文章于 2024-03-13 16:53:44 发布
最新推荐文章于 2024-03-13 16:53:44 发布
阅读量2.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： html+css+js+框架 文章标签： outinput
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Ariel_201311/article/details/87857456
本文介绍了一种在HTML中使用oninput事件限制input type=number框输入长度的方法，通过简单的JavaScript代码实现，确保用户无法输入超过指定长度的数字。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

慕客网标明的用法是适用type为text和passswod的
在这里插入图片描述
当我input框设置type为number的时候怎么限制输入长度呢？使用outinput就可以啦

<input type="number" name="phone" id="phone" value="phone" oninput="if(value.length>11)value=value.slice(0,11)" />
为什么input中的maxlength属性失效了
猿小白的博客
10-24 1万+
今天在遇到限制某个输入框的最大长度的需求，比如一个要求输入手机号的输入框：当时我是这样写的 <input type="text" placeholder="请输入手机号码" maxlength="11" /> 如果是上面的这种写法的话，maxlength属性是有效的。但是type=”text”有一个不好的体验，就是获取焦点后弹出的输入法是默认拼音的那种，不太适合此处要求纯数字的需...
uni-app 安卓消失的字符去哪里了？maxLength失效了！
m0_56600567的博客
05-29 1055
前段时间不是在开发uni-app的一个小应用嘛，然后今天测试发现，有一个地方在苹果是没有问题的，但是在安卓上出现了问题，附上安卓的截图。d的平台进行校验的时候，这串字符的长度正好50，所以消失的字符去哪里了？是字符消失了，还是计数器有问题了？用户可以通过长按输入框 → 选择“粘贴” → 插入大量文字，完全绕过 maxlength 的限制。在这里我是有限制maxLength=50的，而且，赋值字符串到。在组件中使用这个 Mixin 并传入 maxLength。外部调用时传入 maxLength。
input 属性为 number，maxlength不起作用如何解决？
热门推荐
malan_wpf的专栏
03-03 6万+
效果ok，当 时maxlength失效，长度可以无限输入。 解放方案： 5)value=value.slice(0,5)" /> 很简单，搞定！
el-input type为number最大值和长度无法限制
qq_39304141的博客
09-02 2471
<el-input type="number" class="button_style" v-model="depth" min="1" max="99999" oninput="if(value.length > 5) value = value.slice(0,5)" />
input输入框为数字(number)类型时maxlength属性不起作用
小涛Dirge
11-12 2045
使用html代码解决 <input type="number" maxlength="5" oninput="if(value.length>5)value=value.slice(0,5)" /> 使用js代码解决 //输入框为数字类型时防止maxlength属性不起作用 $('input').bind('input propertychange', function() {...
input type number maxlength
mixcoding的博客
07-09 227
input type为数字(number)类型时maxlength属性不起作用 js解决方案 <input type="number" name="phone" id="getCode" placeholder="请填写手机号码" maxlength='11'> $('#getCode').bind('input propertychange', function () { if ($(this).attr("type") == "number") { /
input 属性为 number，设置maxlength长度
weixin_41262185的博客
10-08 1579
一般情况下，标签内直接加maxlength=“具体数值”属性即可，当type=“number”时maxlength则不生效。 以下为例子解说 <input type="text" maxlength="11" /> 此时能达到限定效果， 当<input type="number" maxlength="11" />时 maxlength失效，长度可以无限输入。 解决方案...
input 标签的 type 属性设置为number时表示
最新发布
07-04
引用文本："引用[1]:input的type为number时，maxlength属性失效问题及解决方法。有效解决： //html <input type="number" oninput="if(value.length>18)value=value.slice(0,18)"/>//js//输入框为数字类型...
vue+elementui 项目中输入手机号，要求必须是数字限制最长11位 。type=“number“ 中maxlength失效
11-02
Element UI 的项目中，如果你想要限制输入框（通常使用 `el-input` 组件）内的手机号只允许输入数字并最多11位，尽管已经设置了 `type="number"` 和 `maxlength="11"` 属性，但在某些情况下这两个特性可能会失效。...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：TextInput）
m0_64420071的博客
03-13 2621
ArkTS声明式开发（基础手势：TextInput）
html的input的type为number时，maxlenght无效
win_turn的博客
07-03 3616
问题 当input的type为text时，maxlenght可以起到控制长度的作用。 当input的type为number时，无效。  解决办法 以下两种方法任选其一 可以将type设置为tel 5)value=value.slice(0,5)" />
Input为number类型maxlength不好使，用js轻松解决
BADAO_LIUMANG_QIZHI的博客
01-11 2314
场景 &lt;input type="text"  maxlength="5" /&gt;   //可以 &lt;input type="number"  maxlength="5" /&gt;  //没有效果 如果为number怎样控制输入长度 解决 &lt;input type="number" oninput="if(value.leng
解决input输入框type设置为number，maxlength无效问题
weixin_45274678的博客
02-21 593
解决input输入框type设置为number，maxlength无效问题
input输入框type设置为number，maxlength无效
gs981600308的博客
07-31 1万+
结论：input输入框type设置为number，maxlength无效，设置为tel，maxlength有效 一个小细节，以前很少注意，直到最近做的一个项目，当我把一个输入数字的input框的类型设置为number时，input框还是可以无限输入，设置maxlengh=10就不起作用了。 然后我就去百度了一下，type设置为tel时，maxlength就起作用了。为什么呢？ 这里我先说一下inp...
解决input为number类型时maxlength无效的问题
u011927449的博客
07-23 842
使用input数字number类型的时候maxlength无效，假设需要控制输入数量为18，可以用以下方式： 无效： <input type="text" maxlength="18" /> 效果ok，当<input type="number" maxlength="18" /> 有效： <inputtype="number"oninput="if(value.length>18)value=value.slice(0,18)"/>...
input type设置成number时maxlength属性無効
always007的博客
10-19 484
http://www.cnblogs.com/Chen-XiaoJun/p/6246946.html ibm wacs マニュアル https://reactjs.org/docs/thinking-in-react.html https://www.zhihu.com/question/26872848 http://www.importnew.com/1
解决input,number类型的maxlength无效
叶落无痕的博客
08-26 6334
使用input数字number类型的时候maxlength无效，假设需要控制输入数量为5，可以用以下方式： 无效： <input type="text" maxlength="5" /> 效果ok，当<input type="number" maxlength="5" /> 有效： <inputtype="number"oninput="i...
input设置type为number时，maxlength属性无效
xxx_holic123的博客
06-02 2541
input设置type为number时，maxlength属性无效
关于input type=number时，maxlength失效，如何限制输入位数
m0_67992720的博客
04-10 958
关于input type=number时，maxlength失效
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值