el-inppt无法控制输入长度

最新推荐文章于 2024-03-14 17:48:15 发布

qinyuan_18

最新推荐文章于 2024-03-14 17:48:15 发布

阅读量366

点赞数

分类专栏：一些坑文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qinyuan_18/article/details/131412040

版权

一些坑专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章讲述了在Vue中使用el-input组件，当type设置为number时，maxlength属性无法限制输入长度的问题。作者提供了一个解决方案，即取消type=number，改为type=text，并通过onkeyup事件配合正则表达式限制输入内容为数字且不超过指定长度。

摘要由CSDN通过智能技术生成

el-input 限制输入数字和长度

当el-input使用 type=number 时 maxlength 属性失效

            <el-input
              v-model.trim="form.number"
              placeholder="请输入"
              controls-position="right"
              otype='number'
              :maxlength="4"
            />

此时输入框依然可以输入超过4个字符长度 ,只是对输入内容做了限制只能输入数字,同时还可以输入 e + - 等数学符号

解决办法方案:

   <el-input
              v-model.trim="form.number"
              placeholder="请输入"
              class="input-180"
              controls-position="right"
              onkeyup="value = value.replace(/[^\d.]/g,'')"
              :maxlength="4"
            />

我这里采取的方式是直接取消掉type=number 这个属性此时输入框的属性输type =text , 此时的maxlength 属性设置是生效的,我们只需要在onkeyup这个事件中对输入内容做限制即可