input type=number maxlength 失效

最新推荐文章于 2025-05-29 16:41:21 发布

原创最新推荐文章于 2025-05-29 16:41:21 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

HTML5 专栏收录该内容

3 篇文章

订阅专栏

<input
  v-model.trim="form.idCard"
  placeholder="请输入身份证号"
  @input="(e) => form.idCard =  e.target.value.slice(0,18)"
  type="number"
/>

@input="(e) => form.idCard = e.target.value.slice(0,18)"

目前我的解决方案就直接直接截取，希望大家提供更好的方案

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

saturday-yh

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

为什么input中的maxlength属性失效了

猿小白的博客

10-24

1万+

今天在遇到限制某个输入框的最大长度的需求，比如一个要求输入手机号的输入框：当时我是这样写的 <input type="text" placeholder="请输入手机号码" maxlength="11" /> 如果是上面的这种写法的话，maxlength属性是有效的。但是type=”text”有一个不好的体验，就是获取焦点后弹出的输入法是默认拼音的那种，不太适合此处要求纯数字的需...

JavaScript - ＜input＞纯数字（type=“number“）输入限制长度、最小值、最大值或多条件同时限制

资深程序员

01-08

5349

前言当type为number时，其属性maxlength/max/min限制均失效。如果您的数字输入框想要限制长度或最大（小）值，或多条件同时限制，如下代码所示方法不可行： <input type="number" maxlength="5" max="10" min="0" > 解决方案实现方法有很多，但应使用“最简单”的方式实现。通过oninput事件便可实现（本质就是重新计算结果再返回），如下所示示例代码： <!--限制长度--&g

参与评论您还未登录，请先登录后发表或查看评论

【vue】el-input当type=“number“时maxlength不生效

BigBigHang的博客

08-12

1183

【vue】el-input当type="number"时maxlength不生效

解决input标签设置type = “number” 时，maxlength失效的问题

想好了再写！

02-07

1017

解决input标签设置type = "number" 时，maxlength失效的问题。

uni-app 安卓消失的字符去哪里了？maxLength失效了！

m0_56600567的博客

05-29

1055

前段时间不是在开发uni-app的一个小应用嘛，然后今天测试发现，有一个地方在苹果是没有问题的，但是在安卓上出现了问题，附上安卓的截图。d的平台进行校验的时候，这串字符的长度正好50，所以消失的字符去哪里了？是字符消失了，还是计数器有问题了？用户可以通过长按输入框 → 选择“粘贴” → 插入大量文字，完全绕过 maxlength 的限制。在这里我是有限制maxLength=50的，而且，赋值字符串到。在组件中使用这个 Mixin 并传入 maxLength。外部调用时传入 maxLength。

关于input type=number时，maxlength失效，如何限制输入位数

m0_67992720的博客

04-10

957

关于input type=number时，maxlength失效

解决ElementUI Input 输入框type=“number“时maxlength失效及可以输入字母e的问题

Java学习

04-14

7024

在使用Element前端组件时，发现把Input 输入框的type设置为number时，会造成maxlength属性失效的问题，可以输入很长的数字导致字段超长，另外min属性和max属性也只是限制输入框右边箭头调整的范围，根本无法限制住手动输入数值的范围，以及还可以输入“e”，“+”，“-”字符等问题。下面就来一一解决。

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+elementui 项目中输入手机号，要求必须是数字限制最长11位。type=“number“ 中maxlength失效

11-02

Element UI 的项目中，如果你想要限制输入框（通常使用 `el-input` 组件）内的手机号只允许输入数字并最多11位，尽管已经设置了 `type="number"` 和 `maxlength="11"` 属性，但在某些情况下这两个特性可能会失效。...

帮我分析一下为什么检验不成功<uni-forms v-else ref="form" :modelValue="yanzhen"> <uni-forms-item name="tName" :rules="[ { required: true, errorMessage: '请输入密码', format: 'number' // 基础校验 }, { pattern: /^\d+$/, // 正则严格校验 errorMessage: '密码必须为纯数字' }, { minLength: 3, maxLength: 5, errorMessage: '密码长度需在3-5位' } ]" > <uni-easyinput type="text" class="label-item" placeholder="请输入手机号" :styles="itemStyle" :inputBorder="false" v-model="yanzhen.phone" /> </uni-forms-item> <uni-forms-item name="password1" :rules="[ { required: true, errorMessage: '请输入密码', format: 'number' // 基础校验 }, { pattern: /^\d+$/, // 正则严格校验 errorMessage: '密码必须为纯数字' }, { minLength: 3, maxLength: 5, errorMessage: '密码长度需在3-5位' } ]" > <view class="code-input-area"> <input class="input code-input" type="number" placeholder="请输入验证码" v-model="biaodanData.code" /> <button class="get-code-btn" :disabled="biaodanData.isCounting" @tap="handleGetCode"> {{ codeBtnText }} </button> </view> </uni-forms-item> </uni-forms>

03-08

<uni-easyinput type="number" v-model="yanzhen.code"/> ``` --- ### **完整修正方案** ```html <uni-forms ref="form" :modelValue="yanzhen">  name="phone" :rules="[ { ...

input 标签的 type 属性设置为number时表示