解决input标签设置type = “number” 时，maxlength失效的问题

吃葡萄不吐葡萄皮嘻嘻

已于 2023-02-07 11:04:42 修改

阅读量778

点赞数

分类专栏： element ui 文章标签：前端 elementui

于 2023-02-07 10:41:36 首次发布

本文链接：https://blog.csdn.net/qq_45695853/article/details/128914510

版权

element ui 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

添加oninput事件，用js进行判断，如果长度大于11位，则截取前11位，maxlength根据项目需求来设置

<el-input
   oninput="if(value.length > 11) value = value.slice(0,11)"
   v-model="tsForm.tel"
   autocomplete="off"
   clearable
   type="number"
   :maxlength="11"
   style="width: 60%"
 ></el-input>

关注博主即可阅读全文

优惠劵

吃葡萄不吐葡萄皮嘻嘻

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
解决input标签设置type = “number” 时，maxlength失效的问题

解决input标签设置type = "number" 时，maxlength失效的问题。
复制链接

扫一扫

专栏目录

ASP.NET在MVC中MaxLength特性设置无效的解决方法

10-25

主要介绍了ASP.NET在MVC中MaxLength特性设置无效的解决方法,涉及对MVC中表单元素属性的应用技巧,需要的朋友可以参考下

详解微信小程序input标签正则初体验

01-03

开篇废话在开发过程中经常遇到这样的需求：用户只能输入数字并且只保留小数点两位。虽然我们可以在提交表单的时候进行验证，但是...input type=digit bindinput=regInput maxlength=15/> 2. 绑定监听事件 bind

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

Input type = 'number' 和maxlength不能一起用

Luckyzhoufangbing的博客

06-26

2662

input 如果 type='number' 和maxlength一起设置，maxlength会失效改成 oninput 方法监听 <el-input oninput="if(value.length > 11) value = value.slice(0,11)" type='number' v-model="userInfo.registerMobile" ...

<input>属性为number,maxlength不起作用的解决方案

ZQQing1314的博客

10-16

211

　　<input type="text" maxlength="11" /> 效果ok，　　当 <input type="number" maxlength="11" />时maxlength失效，长度可以无限输入。　　解放方案：　　<input type="number" oninput="if(value.length>11)valu...

el-input设置max、min无效的解决方案

最新发布

qq_71214810的博客

03-14

2522

max和min主要是用于设置最大值和最小值的，但是呐，如果你只使用max及min是没有效果的不用el-form表单来验证处理的情况下，举例了下面几种方式：

element的input框type=“number“,maxlength属性失效

浩星

01-12

5334

前言：在使用element input框type=“number”,maxlength属性不起作用问题发现： maxlength属性对type="number"类型的输入框无效，text类型亲测有效解决方法如下：加一个oninput，限制多少位数就多少 oninput="if(value.length > 4) value=value.slice(0, 4)" <el-input v-model="pers...

解决input,number类型的maxlength无效

weixin_30675967的博客

08-30

270

使用input数字number类型的时候maxlength无效假设需要控制输入数量为5，可以用以下方式： <input type="text" maxlength="5" /> 效果ok <input type="number" maxlength="5" /> 无效改成这个： <inputtype="number"onin...

input输入框为数字(number)类型时maxlength属性不起作用

小涛Dirge

11-12

1903

使用html代码解决 <input type="number" maxlength="5" oninput="if(value.length>5)value=value.slice(0,5)" /> 使用js代码解决 //输入框为数字类型时防止maxlength属性不起作用 $('input').bind('input propertychange', function() {...

完美解决input[type=number]无法显示非数字字符的问题

12-01

但另外的一个问题是，input 为 type=”number” 类型的无法显示非数字字符，比如：12/23中/。只能采取另外的思路来解决，比如：显示的时候用非number类型的input或其它元素，当触发onfocus后，利用js 动态修改为...

解决vue项目input输入框双向绑定数据不实时生效问题

11-20

input type=”text” maxlength=”11″ placeholder=”请输入联系人电话” v-model=”form.phone” /> 这样的输入框，绑定的是data中的form对象上的phone字段。在mounted钩子函数里边写： this.form.phone = ...

微信小程序中input组件的type属性3个值的作用

03-29

从文档中可以看到，type属性有三个值：text, number，digit。当我们使用这三个属性值，并在微信web开发者工具中查看效果的时候，其实是看不出来有什么差别的。但是如果在真机上进行预览，就能清楚的了解这三个值得...

input设置type为number时，maxlength属性无效

xxx_holic123的博客

06-02

1978

input设置type为number时，maxlength属性无效

element input框type为number时，maxlength无效

阿锐的博客

02-23

574

<el-input v-model="personal.checkText" type="number" style="width: 160px" clearable maxlength="4" oninput="if(value.length > 3) value=value.slice(0, 3)" placeholder=...

element input框type=“number“,maxlength属性失效

Missying55的博客

09-18

4237

element input框type=“number”,maxlength属性不起作用问题发现： 1、maxlength类型需为number (参照官方文档) 2、maxlength属性对type="number"类型的输入框无效，text类型亲测有效解决方法如下：  <el-input v-model="value" type="number" :maxlength="14" placeholder="请输入"></el-inp

input 属性为 number时maxlength不起作用如何解决？

逆水行舟，不进则退

10-18

1287

input 属性为 number时maxlength不起作用如何解决？ type=text时可以限制input输入内容的长度 <input type="text" maxlength="11" /> 但是 type设为 number 类型的时候就不生效了 <input type="number" maxlength="5" /> //maxlength失效，长度...

解决ElementUI Input 输入框type=“number“时maxlength失效及可以输入字母e的问题

Java学习

04-14

4870

在使用Element前端组件时，发现把Input 输入框的type设置为number时，会造成maxlength属性失效的问题，可以输入很长的数字导致字段超长，另外min属性和max属性也只是限制输入框右边箭头调整的范围，根本无法限制住手动输入数值的范围，以及还可以输入“e”，“+”，“-”字符等问题。下面就来一一解决。

微信小程序input的type=“number“不起作用

MistyWood的博客

11-24

5549

第一次接触小程序，写表单的时候，用了 <input type="number" /> 不管怎么写都能输入英文或者中文还找不到原因，百度一下好像别人都没遇到过这种问题一样最后才知道这个type控制的其实是手机弹出输入法键盘，电脑调试看不出效果来这一个地方卡了十分钟，感觉自己像个弱智 ...

关于input type=number时，maxlength失效，如何限制输入位数

m0_67992720的博客

04-10

677

关于input type=number时，maxlength失效

<input type="" MaxLength="50" class="deit"/>改成按钮

07-28

如果你想将一个输入框(`<input>`)改成一个按钮(`<button>`)，你可以使用以下代码： ```html <button type="button" class="deit" maxlength="50"></button> ``` 在上面的代码中，我将`<input>`标签替换为`<button>`标签，并保留了`class`属性和`maxlength`属性。请注意，`maxlength`属性应该写成小写形式。此外，按钮的文本内容可以通过在`<button>`标签之间添加文本或者使用`value`属性来设置。例如，如果你想在按钮上显示文本内容，可以使用以下代码： ```html <button type="button" class="deit" maxlength="50">点击我</button> ``` 这将在按钮上显示文本"点击我"。请根据你的需求进行适当的修改。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交