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

最新推荐文章于 2024-08-12 15:14:16 发布
原创 最新推荐文章于 2024-08-12 15:14:16 发布 · 3.3k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#javascript #前端 #vue.js
本文讲述了在Vue2项目中，如何在不使用form的情况下使ElementUI的el-input组件的max和maxlength属性失效，通过oninput事件控制value显示解决了这个问题。

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

今天在vue2的项目中使用element中的<el-input>组件，因为没有使用form所以max和maxlength属性没有生效，下面是解决办法

<el-input 
placeholder="请输入" 
v-model="holeDate.holeDiameter" 
size="small" 
:disabled="true" 
oninput="if(value>999){value=value.substring(0, 3)}"
>
</el-input>

使用oninput方法可以控制value值的显示然后来解决值的显示问题 

为什么input中的maxlength属性失效了
猿小白的博客
10-24 1万+
今天在遇到限制某个输入框的最大长度的需求，比如一个要求输入手机号的输入框：当时我是这样写的 <input type="text" placeholder="请输入手机号码" maxlength="11" /> 如果是上面的这种写法的话，maxlength属性是有效的。但是type=”text”有一个不好的体验，就是获取焦点后弹出的输入法是默认拼音的那种，不太适合此处要求纯数字的需...
maxLength属性不起作用了？可能是与InputFilter冲突了
dw610的博客
06-04 1万+
我们都知道，在做登录时，通常需要对用户名和密码的长度进行限制。而在做长度限制时最简单的方法就是在EditText（或者TextView）中设置maxLength属性。前段时间做了一个项目，需要做登录功能，我就在对EditText输入长度限制时用到了这个属性。后来需求又稍有变动，要求在输入时不接受空格和换行，也很简单，对输入框加上输入过滤就行了，如下： @Override public
el-input设置max、min无效的解决方案
qq_71214810的博客
03-14 1万+
max和min主要是用于设置最大值和最小值的，但是呐，如果你只使用max及min是没有效果的 不用el-form表单来验证处理的情况下，举例了下面几种方式：
el-input 限制最大值最小值（亲测有效）
m0_67401935的博客
03-08 1万+
业务需求中，我们经常会遇到输入框的限制数字范围的需求，max，min属性并不行。可以试试这个方法： 代码： <el-form-item label="开始积分" prop="startScore"> <el-input type="number" max="5" min="0" @input="numberChange(arguments[0],5)" @change="numbe
el-input maxlength无效失效不起作用问题
weixin_45827252的博客
03-14 3438
elementplus el-input maxlength无效问题
vue 中使用input number类型 maxlength失效
lishi9092的博客
08-16 1万+
vue中使用el-input不好用，想只能输入数字，且最大长度10 ，但是maxlength属性不管用 于是 template <input type="number" v-model="userId" @input="changeNum" placeho...
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> 即可
解决ElementUI Input 输入框type=“number“时maxlength失效及可以输入字母e的问题
Java学习
04-14 7433
在使用Element前端组件时，发现把Input 输入框的type设置为number时，会造成maxlength属性失效的问题，可以输入很长的数字导致字段超长，另外min属性和max属性也只是限制输入框右边箭头调整的范围，根本无法限制住手动输入数值的范围，以及还可以输入“e”，“+”，“-”字符等问题。下面就来一一解决。
el-input输入值设置最大值、最小值问题
热门推荐
E_li_na的博客
10-22 2万+
如果使用max、min属性，则必须同时加上与type=“number”。 设置type="number"样式，输入框尾部会出现一个上下箭头，min和max只能控制用箭头输入的最大值最小值，对键盘打字输入是限制不住的。 如果需要限制input输入的值，最实用的做法是给input绑定一个change事件，在change事件中用正则判断。这里会涉及到一个type=”number”同时正则判定，对"e"失效的问题。（要看怎么理解失效）,可以同时watch一下el-input绑定的model 设置了type=”num
input设置type为number时，maxlength属性无效
xxx_holic123的博客
06-02 2698
input设置type为number时，maxlength属性无效
优化el-input框的maxlength
weixin_64372719的博客
06-05 1578
根据element-ui的二次封装el-input
给 el-input 设置内容长度的方法
逆风优雅的博客
07-21 1万+
首先，我们都知道，限制input文本框的输入长度的，可以通过给这个元素加上maxlength的属性来实现 <input type="text" value="我是一个输入框" maxlength="5" /> <!-- 此时在文本框中输入的内容只能限制在5个字符 --> 但是，在饿了么框架中，我们想要设置el-input 输入框的长度，使用maxlength,就是无效的，解决的方法是，给这个输入框加上一个oninput属性 <el-input type="te..
ElementUI，el-input输入框max、min限制最大最小值失效
anqiaoyun的博客
07-30 2097
ElementUI，el-input输入框max、min限制最大最小值失效
当element-ui的input框type为number，maxlength不起作用的解决方案
Blues_han的博客
12-03 3559
当element-ui的input框type为number，maxlength不起作用的解决方案oninput截取字符串 oninput截取字符串 示例邮编： <el-input type='number' oninput="if(value.length>6)value=value.slice(0,6)" v-model.trim="ruleForm.postZip"></el-input> ...
【vue】el-input当type=“number“时maxlength不生效
最新发布
BigBigHang的博客
08-12 1390
【vue】el-input当type="number"时maxlength不生效
element-ui中el-input标签type为number时maxlength不生效解决办法
zsz_1309297338的博客
08-12 5001
element-ui中el-input标签type为number时maxlength不生效解决办法,输入框无法输入
el-input maxlength 无效
IT小白
07-20 2987
el-input maxlength 长度无效
el-input限制最大/最小长度
weixin_61570458的博客
10-28 1万+
限制最大长度 maxlength="你要限制的长度"例：限制长度最大为10，最小长度为2。限制最小长度 minlength。
elementui input 只能输入数字并且限制最大值
aGreetSmile的博客
10-20 1万+
<el-input type="number" oninput="if(value.length>10)value=value.slice(0,10)" @keyup.enter.native="query()" onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))" :max="99999999"> </el-input> oninput 是个自定义事件 在事件里面获取输入的数字长度.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贾宝玉单臂擒方腊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值