el-input maxlength 无效

最新推荐文章于 2024-08-12 15:14:16 发布

原创最新推荐文章于 2024-08-12 15:14:16 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

本文探讨了在Vue中遇到的`maxlength`属性无法限制输入长度的问题，并提供了一个解决方案，即通过`oninput`事件监听并手动截取输入值，以确保输入不超过指定长度。这种方法对于前端开发中输入框控件的长度限制具有实际应用价值。

使用标签，maxlength属性无效

<el-input 
	v-model="form.tele" 
	style="width:160px;" 
	maxlength="11" 
	placeholder="请输入账号" 
	type="number">
</el-input>

把代码修改为即可

<el-input 
	v-model="form.tele" 
	style="width:160px;" 
	 oninput="if(value.length>6)value=value.slice(0,6)"  
	placeholder="请输入账号" 
	type="number">
</el-input>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

le4

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

elementUI之输入框限制数字功能实现

牛先森家的博客

10-18

3124

elementUI之输入框限制数字功能实现第一种：使用 oninput 加正则 <div>输入框限制数字</div> <el-input v-model.trim="iptNum1" placeholder="请输入该内容分值" maxlength="3" minlength="1" oninput="value=value.replace(/[^\d]/g,'')" ></el-input>

el-input maxlength无效失效不起作用问题

weixin_45827252的博客

03-14

3438

elementplus el-input maxlength无效问题

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

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

Java学习

04-14

7432

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

给 el-input 设置内容长度的方法

热门推荐

逆风优雅的博客

07-21

1万+

首先，我们都知道，限制input文本框的输入长度的，可以通过给这个元素加上maxlength的属性来实现 <input type="text" value="我是一个输入框" maxlength="5" />  但是，在饿了么框架中，我们想要设置el-input 输入框的长度，使用maxlength,就是无效的，解决的方法是，给这个输入框加上一个oninput属性 <el-input type="te..

优化el-input框的maxlength

weixin_64372719的博客

06-05

1578

根据element-ui的二次封装el-input

el-input类型为number时限制输入最大长度

no_one_but_you的博客

12-27

3636

el-input类型为number时限制输入最大长度

Element-ui input 输入框限制只能输入数字的问题

飞翔的熊blabla

09-07

6617

需求说明后台管理系统，使用element-ui el-input组件，要求只能输入数字，最先使用的办法： <el-input v-model.number='count' type='number' maxLength='9' /> 复制代码存在的问题 1. maxLength不生效 2. 可以输入e 3. 可以输入1.1.....11...1 复制代码目前解决的办法（..

element ui中input设置只输入数字并限定长度

anchor_1的博客

03-29

4131

在el-input设置 type='number’后，设置输入限定长度maxlength 失效，采用正则匹配的方法，实现限制只输入数字的长度。 <el-input maxlength="10" v-model="supplierData.supplierCode" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"></el-input> ...

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

最新发布

BigBigHang的博客

08-12

1388

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

vue 中使用input number类型 maxlength失效

lishi9092的博客

08-16

1万+

vue中使用el-input不好用，想只能输入数字，且最大长度10 ，但是maxlength属性不管用于是 template <input type="number" v-model="userId" @input="changeNum" placeho...

vue2项目中el-input单独使用max和maxlength不生效问题

six6de6的博客

08-30

3328

今天在vue2的项目中使用element中的组件，因为没有使用form所以max和maxlength属性没有生效，下面是解决办法。使用oninput方法可以控制value值的显示然后来解决值的显示问题。

el-input限制最大/最小长度

weixin_61570458的博客

10-28

1万+

限制最大长度 maxlength="你要限制的长度"例：限制长度最大为10，最小长度为2。限制最小长度 minlength。

element-ui中el-input标签type为number时maxlength不生效解决办法

zsz_1309297338的博客

08-12

5000

element-ui中el-input标签type为number时maxlength不生效解决办法,输入框无法输入

input设置type为number时，maxlength属性无效

xxx_holic123的博客

06-02

2698

input设置type为number时，maxlength属性无效

el-input maxlength失效问题

qq_44634099的博客

03-30

1403

<el-input v-model="formData" :maxlength='3'></el-input> 改成 <el-input v-model="formData" oninput="if(value.length>3)value=value.slice(0,3)"></el-input> 即可

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

想好了再写！

02-07

1079

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

el-input maxlength 不限制长度

weixin_30781107的博客

09-03

1946

背景：小鱼最近使用 input输入框时想限制输入的长度， type = "number" 时，限制的长度无效，代码如下 1 <el-input v-model="form.tele" style="width:160px;" maxlength="11" placeholder="请输入账号" type="number"></el-input> ...

项目总结（input输入框type设置为number，maxlength无效，设置为tel，maxlength有效）

时清云的博客

09-10

5472

这是一个小细节，以前很少注意，直到最近做的一个项目，当我把一个输入数字的input框的类型设置为number时，input框还是可以无限输入，设置maxlengh=10就不起作用了，然后我就去百度了一下，type设置为tel时，maxlength就起作用了。为什么呢？这里我先说一下input框type=tel和type=number的区别。首先HTML5加入了新的input类型 numbe...

element的input框type=“number“,maxlength属性失效

浩星

01-12

5994

前言：在使用element input框type=“number”,maxlength属性不起作用问题发现： maxlength属性对type="number"类型的输入框无效，text类型亲测有效解决方法如下：加一个oninput，限制多少位数就多少 oninput="if(value.length > 4) value=value.slice(0, 4)" <el-input v-model="pers...

input的type为number时，maxlength失效的解决办法

6块腹肌的博客

05-29

1724

<input type="number" oninput="if(value.length>30)value=value.slice(0,30)" placeholder="请输入设备编号" /> 利用oninput事件，这样可以限制长度