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

最新推荐文章于 2024-05-11 16:28:06 发布
最新推荐文章于 2024-05-11 16:28:06 发布
阅读量2.6k 收藏
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/six6de6/article/details/132581317
版权

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值的显示然后来解决值的显示问题 

码农六六
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue-phone-number-input：使用Vue JS进行的电话号码输入（格式和有效电话号码）
02-06
电话号码输入 一个漂亮的文本字段，用于格式化VueJS制作的电话号码我的新图书馆的新版本： 新...演示版安装使用纱yarn add vue-phone-number-input 使用npm npm i --save vue-phone-number-input 用法ES6模块/ Commo
vue-limit-input-group：vue联合输入限制控件el-input-number增强
03-02
分组预设，预设控制组件简述limit-input-number基于element-ui的el-input-number控件基础改造，所以本组件依赖element-ui limit-input-number可直接替换el-input-number安装yarn add vue-limit-input-group 或者npm ...
el-input设置max、min无效的解决方案
qq_71214810的博客
03-14 3901
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输入框根据字节限制输入长度（中文占两字节，数字英文占一字节）
最新发布
qq_41518803的博客
05-11 754
需求：某个字段需要限制输出长度 字符长度小于64个VARCHAR2(64)，这一眼就看出来是数据库的限制，数据库是根据字节做的限制，而前端组件el-input的限制长度（maxlength）只能限制字符串的长度，无法直接限制字节，所以我封装了一个方法，以下是具体代码。我把这个方法封装在通用方法中 commonUtils.js，下面是commonUtils.js的代码。在main.js引用，然后注入到原型，以后可以直接使用该方法。
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 2029
input设置type为number时，maxlength属性无效
给 el-input 设置内容长度的方法
逆风优雅的博客
07-21 1万+
首先，我们都知道，限制input文本框的输入长度的，可以通过给这个元素加上maxlength的属性来实现 <input type="text" value="我是一个输入框" maxlength="5" /> <!-- 此时在文本框中输入的内容只能限制在5个字符 --> 但是，在饿了么框架中，我们想要设置el-input 输入框的长度，使用maxlength,就是无效的，解决的方法是，给这个输入框加上一个oninput属性 <el-input type="te..
优化el-input框的maxlength
weixin_64372719的博客
06-05 836
根据element-ui的二次封装el-input
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
解决vue中el-tab-pane切换的问题
10-15
在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题出现在当用户在不同数量的`el-tab-pane`之间切换时，`el-dialog`可能会保持之前的状态，这通常是...
解决ElementUI Input 输入框type=“number“时maxlength失效及可以输入字母e的问题
Java学习
04-14 5370
在使用Element前端组件时，发现把Input 输入框的type设置为number时，会造成maxlength属性失效的问题，可以输入很长的数字导致字段超长，另外min属性和max属性也只是限制输入框右边箭头调整的范围，根本无法限制住手动输入数值的范围，以及还可以输入“e”，“+”，“-”字符等问题。下面就来一一解决。
当element-ui的input框type为number，maxlength不起作用的解决方案
Blues_han的博客
12-03 3207
当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> ...
element-ui中el-input标签type为number时maxlength不生效解决办法
zsz_1309297338的博客
08-12 4486
element-ui中el-input标签type为number时maxlength不生效解决办法,输入框无法输入
el-input maxlength 无效
IT小白
07-20 2643
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 是个自定义事件 在事件里面获取输入的数字长度.
vue2中el-input中使用el-tag
06-06
在 Vue2 中使用 Element UI 的 el-input 和 el-tag 组件，可以按照如下方式进行： 1. 安装 Element UI： ```bash npm install element-ui -S ``` 2. 引入 Element UI 组件： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 3. 在 el-input 中使用 el-tag 组件： ```vue <template> <div> <el-input v-model="inputValue"> <template slot="prepend"> <el-tag type="success">标签</el-tag> </template> </el-input> </div> </template> <script> export default { data() { return { inputValue: '' } } } </script> ``` 4. 在 el-input 的 slot 中添加 el-tag 组件，可以通过 slot 属性指定 el-tag 放置的位置。在上面的示例中，我们将 el-tag 放置到 el-input 的 prepend 位置。 5. 可以通过 v-model 指令绑定 el-input 的值，从而获取用户输入的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

码农六六

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

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

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

打赏作者

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

抵扣说明：

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

余额充值