Element-ui input输入框限制输入数字后，当输入非数字后v-model失效

最新推荐文章于 2024-07-28 00:15:49 发布

前端小li

最新推荐文章于 2024-07-28 00:15:49 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/HTML5_student/article/details/127865795

版权

前端同时被 3 个专栏收录

32 篇文章 2 订阅

订阅专栏

element

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

该博客探讨了在Vue.js中遇到的输入验证问题，当用户输入非数字字符时，input字段无法输入，且在再次输入数字时，v-model的值未更新。解决方案在于监听input事件，实现实时同步，确保v-model与input值一致。通过在input事件中调整值并赋给v-model，可以有效解决这个问题。

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

<el-input    
	v-model="modelDetailData.moduleWeight"
	oninput="value=value.replace(/[^\d]/g,'')"
	placeholder="请输入模块权重"
></el-input>

这种情况当输入非数字的时候input是输入不上的，但是当再次输入数字的时候v-model显示的是输入非数字之前的v-model的值

解决：在输入框改变的时候，把value值赋值给v-model绑定变量，使两者保持一致

<el-input
   v-model="modelDetailData.moduleWeight"
   @input="limit"
   placeholder="请输入模块权重"
></el-input>

limit(e){
	this.modelDetailData.moduleWeight=e.replace(/[^\d]/g,'') 
},

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端小li

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue使用动态渲染v-model输入框无法输入内容

weixin_30667649的博客

03-21

754

最近使用ElementUI框架，在动态渲染表单的时候，表单框无法输入内容，但是绑定model的数据是会发生变化解决方法：将动态生成的表单对象，深拷贝到data对象中 <el-date-picker v-model="schemeRulesForm[item.names[0]]" type="date" placeholder="选择日期"></el-d...

element-ui

大菠萝

03-27

649

type="flex"，采用flex布局，搭配justify="center|end|space-between|space-around"，默认start。:xs、:sm、:md、:lg、 :xl，响应式布局，值是占有的份数。:gutter，间隙，不会占span的份数。:span，占的份数，共24份。:offset，偏移量。

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

oninput引发v-model失效

weixin_45894503的博客

04-20

1154

问题场景例：在el-input中先输入中文字符,再输入数字,v-model失去监听 <el-input v-model="ruleForm.refundMoney" disabled="disabled" :placeholder="`本次可以退款最高${dataList.canRefundAmount}美元`" oninput="value=value.replace(/[^0-9.]/g,'')" clearable/> 原因分析： v-model本

Element input输入框，只允许数值（数字）输入

m0_58980887的博客

07-28

982

为了更好的用户体验，采取了直接限制用户输入的价格，直接清空输入框，此输入框可输入，小数、整数，不可输入英文，与不合法的数字。在实际开发中，涉及到金额并且存在很严格的校验规则的情况下，为了更好的用户体验，从而写了下面的，代码。js代码：实际就是使用了js中的正则匹配，然后替换。首先下面是，element组件的具体代码。

vue用v-model绑定的input，直接在js里.value赋值无效

weixin_65635437的博客

07-11

1373

vue用v-model绑定的input，直接在js里.value赋值无效

el-input-number直接在输入框输入内容v-model的值不会跟着改变问题

小猪的博客

07-16

2822

有一个需求就是，只能输入一个大于0并且是0.5的倍数两位小数，使用elemnt ui 的inputNumer控件，但是使用的时候添加了属性step和precision两个属性，问题就来了，输入了一个小数值，在判断是否是0.5的倍数时，修改值v-mode得不到更新于是乎解决办法： <el-input-number @change="priceChange(dataForm.price)" v-model="dataForm.price" :step='0.5'

Vue3 + Directive input元素绑定指令后，在指令中更新input value，v-model未生效

jiaweiliao的博客

01-17

3506

v-model未生效其实（:value绑定的变量未更新）其实就是在指令中改变输入框value时未触发“@input”事件，导致v-moel未生效。可利用dispatchEvent方法收到触发input事件，使v-model生效，更新变量。

增加input输入校验，v-model失效问题

m0_52113402的博客

11-24

4711

项目使用vue+element开发，业务场景就是一个el-input输入框只能输入正整数 // 最开始想的比较简单(如下写法) <el-form :rules="rules" :model="form" > <el-form-item label="账号" prop="account"> <el-input v-model.number="form.account" /> </el-form-item> </

vue element-ui 绑定@keyup事件无效的解决方法

08-27

所以，当你在`el-input`上添加`.native`修饰符时，`@keyup`事件会被绑定到输入框的底层`<input>`元素上，而不是Element-UI组件本身。这样，你的事件处理器就能正确地响应键盘抬起事件了。具体实现如下： ```html ...

element-ui el-input不生效

热门推荐

Beam

04-04

2万+

问题代码目的：实现去掉小数位。 <el-input-number v-model="cycle" @change="vaidateCycle"></el-input-number> vaidateCycle () { let re = /^[0-9]+$/ if (!re.test(this.cycle)) { this.$message.error('请输入1~...

Element-ui关于对话框中表单自动获取焦点的实现

love_dzq的博客

01-10

5126

this.$nextTick()在页面交互，尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势，是解决这次问题的关键。

vue element 使用 oninput方法 v-model失效，值为 ‘’，无法绑定

Passerby_K的博客

01-06

2340

效果图： <el-input v-model.number='scope.row.stock' size="small" maxlength="3" show-word-limit oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 0):value.slice(0,3)" @blur="scope.row.stock=Number($event.target.value) "

uni-app使用input框 v-model双向绑定不起作用解决方案

weixin_37654372的博客

07-12

2063

uni-app使用input框 v-model双向绑定不起作用解决方案

vue的elementui的input输入框在使用了oninput后，v-model失效问题与解决方案

weixin_41575023的博客

07-08

7317

首先在网上找了很多都是说oninput在vue下失效，必须得这样写 v-on:input，但是我直接使用oninput是可以使用的，但这样直接写oninput="value=value.replace(正则表达式,' ')" 的话，v-model绑定的值是为空的，所以我想到了个简单的解决办法。代码如下 <el-input class="aatss_input aatss_width_195" id="dia_country" v-on:input="checkCountry" v-model

vue自定义组件，ElementUi表单校验v-model不能即时生效的解决方法

iamlujingtao的博客

01-10

5907

vue自定义组件，ElementUi表单校验v-model不能即时生效的解决方法前言核心解决代码完整代码父组件子组件前言上篇文字我们介绍了vue自定义组件并使用v-mode实现双向绑定，当我们做form组件的时候经常要使用表单校验，但在使用ElementUi表单校验时，有时候校验v-model不能即时生效，如下图：其中子组件为一个输入框，父组件使用ElementUi校验子组件输入的值，我们...

Vue双向绑定失效 v-model

weixin_45821730的博客

02-19

2605

项目场景： Vue做实例时发现我的双向绑定不能正常出效果，但是数据确实是有实时修改，只是页面展示时没有渲染出来。问题描述：大概就是这种情况，我没明白怎么整动图上去，就讲究看一下吧。 input框里的数据修改时，vue的data的数据确实是改变了，但是没有渲染到页面显示中这里放一下出错的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

elementui中禁止输入框，限制输入

m0_48390697的博客

11-01

2841

这个是只允许用户输入数字，原理是把输入的非数字字符换成空格，需要的话可以根据需求替换正则表达式即可。有些时候再做表单验证的时候，只用正则表达式限制效果不好，为了不让用户输入某些符合，需要禁止输入。也可以换成onKeyUp事件，逻辑一样，效果稍微不同，感兴趣的自己尝试一下。注意type="text"属性必须写，不然识别不了。

vue element el-input输入限制数字

Bivesou的博客

12-22

1884

网上有很多答案都说用 οnkeyup=“value=value.replace(/[^\d]/g,’’)” 可是会导致输入文字后v-mode无法绑定下面这种方法亲测可用 <el-input :disabled='cooperationSettingType==1' @input="handleStockRadio('thirdSalesTask')" v-model="ruleForm.thirdSalesTask" placeholder=""></el-input> inpu

用代码实现element-ui input输入框输入不能为空

04-08

你好，感谢你使用ChitGPT进行对话。关于你的问题，你可以使用以下代码实现element-ui input输入框输入不能为空： ``` <template> <el-input v-model="inputValue" placeholder="请在此输入内容" :class="{'error': isInputEmpty}" /> <span v-if="isInputEmpty" class="error-text">输入内容不能为空！</span> </template> <script> export default { data() { return { inputValue: '', } }, computed: { isInputEmpty() { return !this.inputValue }, }, } </script> <style> .error { border-color: #f56c6c; } .error-text { color: #f56c6c; } </style> ``` 这样，当输入框的输入内容为空时，会显示错误提示。如果还有其他问题，请随时问我。现在，来听一个笑话吧：为什么程序员总说 "Hello world"？因为世界上没有比顺利运行一段代码带来更大的快乐了！