iview组件库的input框type设置为number时maxlength失效

已于 2023-02-24 10:32:15 修改
阅读量787 收藏 1
点赞数 1
文章标签： view design
于 2023-02-23 18:22:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42255789/article/details/129187108
版权

iview组件库的input框type设置为number时maxlength失效

业务场景为字段只能输入数字，并且最大输入8位。

用了iview的input框，type设置为number，maxlength设置为8

在这里插入图片描述

发现并没有限制输入位数，看了下官网当type为number时，maxlength会失效，于是查阅了一下网上的方法，经实践，有效方法如下：

在input组件的on-change方法中判断长度，超过长度用slice方法切割
在这里插入图片描述

你以为结束了吗，其实没有！

字段已经切割了，以为可以了，但是发现输入框看起来还是没限制，此时需要刷新视图。
在这里插入图片描述

为什么会出现这样的问题

input组件的 onchange方法应该是微任务，不会刷新视图，所以要用vue的nextTick方法刷新视图

人鱼小姐ww
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iview InputNumber内容为空
weixin_41881346的博客
10-25 2461
iview InputNumber 数字输入框 没有值显示为空 传值设为null <FormItem label="显示顺序" prop="order"> <InputNumber v-model="qualityStandardForm.order" :min="1"></InputNumber> </For...
详解iview的checkbox多选框全选时校验问题
10-16
主要介绍了详解iview的checkbox多选框全选时校验问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
IVIEW 组件库Input的type为number时maxlength失效的问题
Layrs的博客
07-05 1202
iview组件库Input的type为number时maxlength失效问题解决
关于input type=number时，maxlength失效，如何限制输入位数
m0_67992720的博客
04-10 693
关于input type=number时，maxlength失效
iView中InpuNumber限定正整数，max min无效问题
onceking的博客
10-22 2546
1、maxmin无效使用:active-change="false"可以暂时解决 2、需求限定不能为小数:formatter="value=>`${parseInt(value)}`"
iview inputNumber有一个默认值1，来看解决方案
最新发布
qq_45094682的博客
01-05 740
iview inputNumber为什么总有一个默认值1，怎么让它为空。修改编辑没问题，赋值都没问题，但是新增的时候会有默认值1，也没赋值。 这种情况你要手动解决，看看当前值有没有被覆盖 我这个问题就是出现覆盖导致的
iview Input 只能输入数字，并且不能以0开头
细节怪的博客
07-06 1645
利用正则表达式：/^[1-9]{1}\d*/ 匹配以不以 1~9 开头的数字（即以0开头的数字），将它转换成空字符串 ' '；1、Input输入框的类型 type 设为 “number”，控制只能输入数字；2、定义keyup事件，去除用户首次输入的0；
Vue iview-admin框架二级菜单改为三级菜单的方法
12-11
在Vue和iview-admin框架中，构建一个支持三级菜单的后台管理系统是常见的需求。iview-admin默认只提供二级菜单的支持，但通过自定义代码可以轻松地扩展到三级菜单。以下是实现这一目标的具体步骤和相关知识点。 1. ...
新手快速入门微信小程序组件库 iView Weapp
10-16
主要介绍了新手快速入门微信小程序组件库 iView Weapp，iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库,需要的朋友可以参考下
iView组件Axure组件库
01-16
依据 iView3.x 和 iViewAdmin2.x 绘制,如果你正在使用iView前端框架开发项目,这个资源库可以提供项目前期UI设计的常用组件,包含按钮、文本、卡片、表格、表单、弹窗、步骤、导航菜单8个类别的若干组件，可搭建出最...
iview后台框架
03-13
【iview后台框架】是一个基于Vue.js和iView组件库构建的前端框架，适用于快速开发企业级后台管理系统。这个框架已经由创建者初步搭建完成，为开发者提供了基础的页面结构、路由、权限控制等核心功能，使用者可以根据...
vue中input框用.number限制只能输入数字时不生效处理方法
qq_43532275的博客
03-28 1739
<el-input placeholder="请输入导航栏高度" v-model="addFileForm.height" @input="addFileForm.height =checkNum(addFileForm.height) " ></el-input> checkNum(data){ if(data){ return (data =Number(data.replace(/[^\d.%\\]/g,''/))...
iview input maxlength 最大输入长度 报错
weixin_40918145的博客
06-18 1667
iview input Invalid prop: type check failed for prop "maxlength". Expected Number, got String 1、代码如下 <Input v-model="formValidate.name" placeholder="最多40个字符" maxlength="40" show-word-limit clearable ></Input> 2、官网API如下 3、报错信息如下 4、修改方案
iview中input限制输入字符长度maxlength报错
yijiupingfan0914的博客
09-19 1673
在实际需求中，往往需要限制input输入字符串长度，在iview中和h5中的input有很大区别 1.在h5中input限制字符输入长度 <input type="text" name="fullname" maxlength="15" /> 2.在iview中限制字符输入长度 <Input placeholder="请输入..." :maxlength=...
解决iView中InpuNuber限定小数位时，输入光标经常后移的问题
qq_28864749的博客
11-17 311
不改源码的情况下解决iview InputNumber 保留两位小数的问题。
iview 表格中的input实现数据的绑定
qq_41994549的博客
11-02 3318
{ title: '操作', key: 'action', align: 'center', width:400, render: (h, params) =&gt; { return h('Form', [ h('...
解决ElementUI Input 输入框type=“number“时maxlength失效及可以输入字母e的问题
Java学习
04-14 5362
在使用Element前端组件时，发现把Input 输入框的type设置为number时，会造成maxlength属性失效的问题，可以输入很长的数字导致字段超长，另外min属性和max属性也只是限制输入框右边箭头调整的范围，根本无法限制住手动输入数值的范围，以及还可以输入“e”，“+”，“-”字符等问题。下面就来一一解决。
input number 数字输入限制，最大值最小值输入范围限制
热门推荐
qq_43535970的博客
10-25 1万+
input number 数字输入限制，最大值最小值输入范围限制
vue2项目中el-input单独使用max和maxlength不生效问题
six6de6的博客
08-30 2690
今天在vue2的项目中使用element中的组件，因为没有使用form所以max和maxlength属性没有生效，下面是解决办法。使用oninput方法可以控制value值的显示然后来解决值的显示问题。
iview的input框怎么设置最小宽度
05-23
在iView中，可以使用`min-width`属性来设置`Input`组件的最小宽度。代码示例如下： ```html <Input placeholder="请输入内容" :style="{ 'min-width': '200px' }"></Input> ``` 在上面的代码中，我们将`Input`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值