Vue 数值型输入框，并限制长度

最新推荐文章于 2024-04-10 16:50:17 发布

乐之终曲

最新推荐文章于 2024-04-10 16:50:17 发布

阅读量3.0k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： # Vue 文章标签： vue input 数值型输入框 number

本文链接：https://blog.youkuaiyun.com/qq_37143673/article/details/103503571

Vue 专栏收录该内容

18 篇文章

订阅专栏

本文探讨了Vue中<el-input type=number/>组件存在的maxlength属性失效问题及max属性限制不足，通过引入正则表达式改进输入限制，确保用户输入符合预期格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 数值型输入框，并限制长度

描述
代码

描述

原有的 <el-input type="number" /> 个人觉得存在问题，maxlength 属性无法生效，其次 max 属性虽然能够限制，但是无法阻止用户手动输入，因此依然存在 bug

代码

改为正则表达式方式

<el-input v-model="form.level" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" maxlength="10" 
show-word-limit clearable />

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

乐之终曲

关注关注

2
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue3全家桶入门（通过vue-cli脚手架搭建todolist项目环境，深入vue3.0核心知识）

qq_49900295的博客

05-15

3363

todolist项目准备 vue3.0环境搭建进入想要的目录路径：vue create todolist 选择select features，点击回车上下键移动按空格选择，一定不要按回车，这样就进入下一步了我们按空格选择Router和vuex和下面的css预处理器，我们暂时先把Linter这个关闭掉我们选择3.x的版本，按回车路由是否选择history模式，写Y按回车这一步选择css预处理器，我就选择一个less 配置项就选择它默认的配置项 ..

2023年最新的Vue全套面试题（含答案）

热门推荐

xm1037782843的博客

03-06

14万+

前端Vue面试题最新面试题最全的面试题vue

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

vue输入框必须输入数字及小数且可限制长度

CHINESE0726的博客

04-10

572

vue+elementui输入框必须输入数字及小数且可限制长度。

input为number类型时，限制长度

m0_58893670的博客

02-17

1639

场景：手机号只能输入11位，且为 number 类型 vue 使用 element-ui 的 el-input 时，不设置 type 属性，maxlength 是可以正常限制字数。但如果让 type="number" ，maxlength就不起作用了应给 input 添加 oninput 方法监听 <el-form-item label="手机号"> <el-input v-model="searchForm.phone" type="number" oninput="

vue3中封装输入框只能输入正整数、整数、动态保留想要的小数位数的方法

kanno的博客

11-02

1521

vue3中封装输入框只能输入正整数、整数、动态保留想要的小数位数的方法

vue中 input 里面写入的 maxlength 不生效，maxlength无效

欢迎来到我的频道~

11-11

6116

解决办法：【限制长度和字数】：设置input 的type = ' number ' ，然后在oninput里面做判断。 <input type="number" v-model='phone_val' oninput="if(value.length>11)value=value.slice(0,11)" placeholder="输入手机号" /> ...

input maxlength 属性不起作用

huch的博客

06-05

4万+

大家经常会遇到限制某个输入框的最大长度的需求，比如一个要求输入手机号的输入框： &amp;lt;input type=&quot;text&quot; placeholder=&quot;请输入手机号码&quot; maxlength=&quot;11&quot; /&amp;gt; 如果是上面的写法的话，maxlength属性是有效的。但是type=”text”有一个不好的体

vue面试题集合

fhvhdfhfh的博客

01-12

529

vue面试题

9、VUE面经

shixue7758的博客

05-31

598

文章目录<一>、基础知识1、vue2/3的区别2、vue的基本原理3、双向数据绑定的原理<二>、VUEX1、原理2、VUEX的属性值有哪些<三>、vue-router1、对前端路由的理解2、钩子函数<四>、组件通信1、父组件向子组件通信2、子组件向父组件传递参数3、非父子组件之间的通信<五>、生命周期1、常见的生命周期2、keep-live3、在哪个周期调用异步请求<六>、虚拟DOM1、谈谈你对虚拟DOM的理解 <一>、基础

Flask+VUE 实现页面增删改查显示开发+测试（图文教程附源码）

全村的希望的博客

05-08

8227

环境搭建博文： Flask+mysql接口增删改查博文：本篇文章接着上面的图书项目book增删改查实现 vue 创建新项目：vue create book 初始化：vue init webpack book 中间要是提示要安装脚手架，按照提示执行命令即可新建项目成功后，目录结构如下： ...

vue+elementui 项目中输入手机号，要求必须是数字限制最长11位。type=“number“ 中maxlength失效

肖肖肖丽珠的博客

07-01

8477

这样的需求是经常用到的。但是我们在用的时候却发现了一些问题: <el-inputv-model="mobile" placeholder="手机号" type="number" maxlength="11"></el-input> 只能输入数字:type="number" 最长11位 : maxlength="11" 如果写type="number" maxlength="11"。的确只能输入数字但是maxlength="11"的长度限制却失效了。如果不写...

vue 中 input v-model中的坑及限制number的长度

cmchenmei的博客

09-05

2万+

v-model.number 存在的坑 &lt;input type="number" v-model='order'&gt; //在输入值在输出的时候会被转换为string类型想要输入的内容依然是数字 &lt;input type="number" v-model.number='order'&gt; 输出的时候是Number类型，因为在内部帮你把数据做

vue input框只能输入数字、小数点并限制长度

chuxuezhe__1的博客

09-15

1万+

今天在写代码时遇到一些问题，input的type属性值为number时，maxlength的设置会失效，type属性值为text时，又无法满足input只能输入数字的限制，找到的解决方法如下： <form v-for="(item,index) in list" :key='item.id'> <input type="text" placeholder="请输入数量" v-model="item.num" maxlength="7" @keyup="item.nu

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

no_one_but_you的博客

12-27

3227

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

vue前端el-input输入限制输入位数以及输入规则

weixin_45807525的博客

08-04

1万+

摘要：配合el-input实现输入内容的校验，仅可输入-号（且在第一位）可控制输入长度封面图片非原创，侵权必删

vue 限制input[type=number]的输入位数策略整理

weixin_30731305的博客

07-13

698

https://blog.youkuaiyun.com/weistin/article/details/79664261 vue type="number 设置maxlength 是无效的我们可以使用 type="tel" malength="3" 转载于:https://www.cnblogs.com/guangzhou11/p/11179818.html...

vue+js+jquery：常用的方法

好幸运

07-01

272

一、获取number类型长度方法一：调用toString方法转为字符串后取长度 var num = 123; alert(num.toString().length); 方法二：隐式转字符串后取长度 var num = 123; alert((num + ‘’).length) 二、判断对象是否为空 if(JSON.stringify(official) === '{}'){ } ...

vue3 自定义输入框字符的占位符

qq_47497132的博客

11-16

1197

需求说明：两个系统不同数据库数据交互时，由于数据库存储字节长度不同导致定义字节长度参差不齐，后端无法修改，所以重任落到了前端头上从源头上限制传给后端的字符长度，普通后端定义长度为 1 字符前端限制字符长度为 1 就行，现在需要改成数字英文占一个字符，中文占两个字符其他占四个字符。输入框加上特殊属性 data-maxCharShow="true" data-maxCharlength="10"data-maxCharShow: 是否触发字符长度重新计算。首先在 main.js 写入。

vue项目实战系列十：自定义指令

wanmeijuhao的博客

12-29

427

①. type="number"属性限制数字不理想,不大喜欢右侧三角.②. 方案:a. 监听input事件再加上正则过滤:" />(2). 但是会有回退现象.b. 用vue的自定义指令时可以直接获取dom,消除了回退.// 注册一个自定义指令 v-number// 聚焦元素})})都只有在第一次点击按钮的时候可以让Input获得焦点，在不刷新页面的情况下，第二次以后的按钮点击都不会让Input获得焦点。

vant feild type