当 input 属性为 number，设置maxlength属性不生效的坑

最新推荐文章于 2024-08-12 15:14:16 发布
最新推荐文章于 2024-08-12 15:14:16 发布
阅读量4.6k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： HTML JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AI_U20/article/details/94632931
本文揭示了HTML中input type=number元素的maxlength属性为何失效，并提供了一种通过oninput事件限制输入长度的解决方案。

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

当 input 属性为 number，设置maxlength属性不生效的坑

一、现象

1、 <input type="text" maxlength="11" />，有效；
2、 <input type="number" maxlength="11" /> 无效

当input的type属性设为number时，maxlength属性失效，长度可以无限输入。

二、解决方法

<input type="number"  oninput="if(value.length>11)value=value.slice(0,11)"/>
为什么input中的maxlength属性失效了
猿小白的博客
10-24 1万+
今天在遇到限制某个输入框的最大长度的需求，比如一个要求输入手机号的输入框：当时我是这样写的 <input type="text" placeholder="请输入手机号码" maxlength="11" /> 如果是上面的这种写法的话，maxlength属性是有效的。但是type=”text”有一个不好的体验，就是获取焦点后弹出的输入法是默认拼音的那种，不太适合此处要求纯数字的需...
微信小程序表单组件：input组件使用及属性详解
前端基地
03-05 1089
微信小程序的 input 组件是用户输入信息的重要工具。本文详细介绍了它的使用方法，如如何在页面中正确引入与布局。同时，深入解读 input 组件的各类属性，像控制输入类型、最大长度、是否自动聚焦等属性，助力开发者灵活运用，提升小程序交互体验。
input设置type为number时，maxlength属性无效
xxx_holic123的博客
06-02 2529
input设置type为number时，maxlength属性无效
input输入框为数字(number)类型时maxlength属性不起作用
小涛Dirge
11-12 2042
使用html代码解决 <input type="number" maxlength="5" oninput="if(value.length>5)value=value.slice(0,5)" /> 使用js代码解决 //输入框为数字类型时防止maxlength属性不起作用 $('input').bind('input propertychange', function() {...
【vue】el-input当type=“number“时maxlength不生效
BigBigHang的博客
08-12 1163
【vue】el-input当type="number"时maxlength不生效
解决ElementUI Input 输入框type=“number“时maxlength失效及可以输入字母e的问题
Java学习
04-14 6989
在使用Element前端组件时，发现把Input 输入框的type设置为number时，会造成maxlength属性失效的问题，可以输入很长的数字导致字段超长，另外min属性和max属性也只是限制输入框右边箭头调整的范围，根本无法限制住手动输入数值的范围，以及还可以输入“e”，“+”，“-”字符等问题。下面就来一一解决。
el-input设置type类型为number之后如何限制字数长度
07-16
但是，对于 type 为 number 的 input，maxlength 属性不会生效，因为它是基于字符数计算的，而不是基于数字数值计算的。 要限制 el-input 的数字长度，你可以使用 `max` 和 `min` 属性来设置允许的最大和最小值。...
input属性
最新发布
03-22
注意，一旦用户输入内容或者设置了 `value` 属性，则 `placeholder` 不再生效。 #### 3. 验证相关属性 - **required**: 表明字段为必填项，如果未填写则无法成功提交表单。 - **min/max/step**: 主要适用于数值型...
el-input-number怎设置长度10限制
03-08
好的，用户现在问的是如何在Element UI的el-input-number组件中设置长度限制为10。之前用户的问题是关于如何让placeholder和输入内容居中，所以这次可能是在同一个项目中继续调整输入框的验证。我需要先理解用户的...
解决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...
element-ui中el-input标签type为number时maxlength不生效解决办法
zsz_1309297338的博客
08-12 4866
element-ui中el-input标签type为number时maxlength不生效解决办法,输入框无法输入
解决input标签设置type = “number” 时，maxlength失效的问题
想好了再写！
02-07 1012
解决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...
el-input设置max、min无效的解决方案
qq_71214810的博客
03-14 1万+
max和min主要是用于设置最大值和最小值的，但是呐，如果你只使用max及min是没有效果的 不用el-form表单来验证处理的情况下，举例了下面几种方式：
vue2项目中el-input单独使用max和maxlength不生效问题
six6de6的博客
08-30 3189
今天在vue2的项目中使用element中的组件，因为没有使用form所以max和maxlength属性没有生效，下面是解决办法。使用oninput方法可以控制value值的显示然后来解决值的显示问题。
input 属性为 number时maxlength不起作用如何解决？
逆水行舟，不进则退
10-18 1397
input 属性为 number时maxlength不起作用如何解决？ type=text时可以限制input输入内容的长度 <input type="text" maxlength="11" /> 但是 type设为 number 类型的时候就不生效了 <input type="number" maxlength="5" /> //maxlength失效，长度...
input 属性为 number，maxlength失效问题
weixin_33843947的博客
02-17 172
2019独角兽企业重金招聘Python工程师标准>>> ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值