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

最新推荐文章于 2024-08-12 15:14:16 发布
原创 最新推荐文章于 2024-08-12 15:14:16 发布 · 4.7k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文揭示了HTML中input type=number元素的maxlength属性为何失效，并提供了一种通过oninput事件限制输入长度的解决方案。

当 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设置type为number时，maxlength属性无效
xxx_holic123的博客
06-02 2621
input设置type为number时，maxlength属性无效
vue+elementui 项目中输入手机号，要求必须是数字限制最长11位 。type=“number“ 中maxlength失效
肖肖肖丽珠的博客
07-01 8638
这样的需求是经常用到的。但是我们在用的时候却发现了一些问题: <el-inputv-model="mobile" placeholder="手机号" type="number" maxlength="11"></el-input> 只能输入数字:type="number" 最长11位 : maxlength="11" 如果写type="number" maxlength="11"。的确只能输入数字但是maxlength="11"的长度限制却失效了。 如果不写...
input输入框为数字(number)类型时maxlength属性不起作用
小涛Dirge
11-12 2072
使用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 1291
【vue】el-input当type="number"时maxlength不生效
vue中input的type属性为number默认保留俩位小数 没有就补全
最新发布
06-04
-使用`type="number"`时，`maxlength`属性不生效（引用[1]提到）。-可以多次输入小数点，导致模型值为空（引用[1]提到）。因此，我们需要一个更Vue-like的解决方案。思路：1.我们可以使用一个自定义组件，通过`v-...
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和输入内容居中，所以这次可能是在同一个项目中继续调整输入框的验证。我需要先理解用户的...
解决ElementUI Input 输入框type=“number“时maxlength失效及可以输入字母e的问题
Java学习
04-14 7247
在使用Element前端组件时，发现把Input 输入框的type设置为number时，会造成maxlength属性失效的问题，可以输入很长的数字导致字段超长，另外min属性和max属性也只是限制输入框右边箭头调整的范围，根本无法限制住手动输入数值的范围，以及还可以输入“e”，“+”，“-”字符等问题。下面就来一一解决。
解决input,number类型的maxlength无效
叶落无痕的博客
08-26 6357
使用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 4922
element-ui中el-input标签type为number时maxlength不生效解决办法,输入框无法输入
input的type设置为number的时候，maxlength无效
Haines
11-14 491
input的type设置为number的时候，maxlength无效 <input type="text" maxlength="6" /> 效果ok <input type="number" maxlength="6" /> 当input type = number 时maxlength失效，长度可以无限输入。 解决方案： oninput事件 当长度超...
解决input标签设置type = “number” 时，maxlength失效的问题
想好了再写！
02-07 1039
解决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不起作用如何解决？
热门推荐
malan_wpf的专栏
03-03 6万+
效果ok，当 时maxlength失效，长度可以无限输入。 解放方案： 5)value=value.slice(0,5)" /> 很简单，搞定！
el-input设置max、min无效的解决方案
qq_71214810的博客
03-14 1万+
max和min主要是用于设置最大值和最小值的，但是呐，如果你只使用max及min是没有效果的 不用el-form表单来验证处理的情况下，举例了下面几种方式：
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值