el-input在对其原生input事件监听并修改双向绑定值时修改无效的问题

最新推荐文章于 2024-08-06 03:27:04 发布
最新推荐文章于 2024-08-06 03:27:04 发布
阅读量1.2k 收藏
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q140948940/article/details/120418247
版权

如题，场景为对于用户输入的空格以及分号进行监听，由于@keyup的空格监听会导致用户使用输入法输入时也会触发目标事件，所以改为input监听其输入的最后一位值。但当监听其原生事件input时会出现双向绑定的值修改了，未响应到页面的情况（目前只发现对于中文分号有此问题），解决方案是手动对event.target.value进行赋值，element-ui@2.15.0 仅作记录

沧沧沧
关注
vue中el-input绑定键盘按键(按键修饰符)
10-15
当需要对el-input绑定键盘事件时，尤其是使用键盘修饰符来监听特定按键的触发，就涉及到了Vue的键盘事件绑定规则。Vue允许开发者将键盘按键作为修饰符来使用，比如监听回车键的事件，有两种写法： ```html <!-- ...
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
10-18
本文主要介绍了如何在Vue.js项目中使用Element UI的el-input组件，监听回车键并实现搜索功能，内容涵盖了组件的使用、事件监听、数据绑定、方法定义、条件判断以及浏览器兼容性处理等多个方面的知识点，对于希望在...
el-input监听事件失效
weixin_45041493的博客
08-20 312
实验了之后发现不仅仅是keyup.enter回车事件，其他事件也被隐藏，需要在其后加.native。在@keyup.enter后加.native即可解决 如下所示。
Web前端-Vue ElementUI el-input组件绑定点击事件
热门推荐
MinggeQingchun的博客
12-22 2万+
1、element中el-input组件事件 <el-input v-model="value" v-on:change="handleChange"></el-input> <el-input v-model="value" @change="handleChange"></el-input> <el-input v-model="value" v-on:input="handleChange"></el-input> &lt
给禁用的 el-input 添加点击/双击事件
最新发布
weixin_41082344的博客
08-06 36
被禁用的 html 标签，无法响应事件解决方案1：在父元素上添加事件el-input 外添加 div在 div 上添加点击事件 若对事件响应范围限制不严，可以在 el-form-item 上添加点击事件（点击表单标签时也会触发事件），必要时需加上事件修饰符 .native el-input 添加样式 position: r...
开发（bug）总结5-el-input无法输入的问题和表单验证失败问题(亲测有效)
Mr_LiuP的博客
10-20 3462
原因（可能）：网上查了很多都没有给出明确的解释，有的说可能是因为组件嵌套太深导致的，也有可能是组件本身有潜在bug。真实原因也没搞懂，有知道的同学可以告诉下。// this.$forceupdate() // 强制数据刷新之后, 验证失效, 改用 $set ,亲测有效。点击添加，表单内可输入用户名 和 用户姓名，但有时会偶发出现无法这两个input框里面无法输入内容。大部分无法输入的问题：基本都是没有进行v-model双向数据绑定，这个很好解决。
el-input控制只能输入数字时，双向绑定偶尔失效
m0_48660438的博客
12-10 1758
el-input只能输入数字时，双向绑定偶尔失效
el-input 只能输入数字类型及v-model双向绑定失效问题
weixin_45642483的博客
04-20 2059
oninput="value=value.replace(/^\.+|[^\d.]/g,'')" <el-input v-model="value" placeholder="请输入" oninput="value=value.replace(/^\.+|[^\d.]/g,'')"> </el-input> 在输入中文触发oninput后，v-model绑定的值会被设成空字符串，这时候再输入数字，v-model绑定的值不会被赋值，一直为空。
vue监听input标签的value值方法
10-18
当用户在`input`框中输入内容时，`@input`会触发绑定的`search`方法，并将当前事件对象传递给该方法： ```html <input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/> ``` 在`...
解决VUE中el-input的二次修改无效问题
qq_57373769的博客
05-17 307
原文链接：https://blog.csdn.net/Akatsuki233/article/details/95350817。原来是因为我的清空Form表单的方式不正确，好好好，给我改。我从网上查阅过多个解决方案，但是均无效。也不知道为啥有这样一个问题？
input输入框的原生事件
m0_56683897的博客
12-09 3630
输入框内容发生变化时触发。(值得注意的是，change事件仅在文本域有效，包括textarea，select)输入框的value值发生变化时就会触发，与change不同，input不用等到失去光标时便会触发。当使用拼音输入法开始输入汉字，文本段落的组成完成或取消时触发。失去焦点，鼠标光标焦点从输入框内移除，不能再输入内容后触发。当使用拼音输入法开始输入汉字，字符被输入到文字时。当使用拼音输入法开始输入汉字时触发。聚焦，鼠标光标聚焦在输入框内时触发。点击事件，鼠标点击输入框时触发。
el-input输入框事件处理
qq_41054877的博客
03-24 1993
element-ui el-input
element el-input @change 无法触发，@input值出错问题
Kimser
07-21 3049
html <div id="app"> el-input <el-input v-model="input" @input="changeValue"></el-input> class el-input <div class="el-input"> <input type="text" @input="changeValue" v-model="input" class="el-input__inner"/> &l
二次封装v-model组件双向绑定问题
qq_40707758的博客
01-21 1020
二次封装v-model组件双向绑定问题1.问题的产生2.解决办法 1.问题的产生 二次封装view UI的Input组件的时候，实现父子组件的v-model双向绑定： //父组件 <search :searchKey.sync="project_name" enterButton="搜索项目" placeholder="输入你感兴趣的项目名或关键字" /> //子组件 <template> <div>
原生js的input事件
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
06-08 1万+
1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。 3.onchange 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。 4.onkeydown 按下按键时的事件触发， 5.onkeyup 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件--相当于一个按键，两个事件，没怎么用过 6.on..
el-input @input 修改v-model的值页面不生效
qq_41766081的博客
11-20 1551
test(val){ this.$nextTick(()=>{ this.model.value =val.replace(/[\W]/g,'') }) } 放在异步里完事 记录一下防止忘记
el-input-number组件无法触发change事件，实时校验失效的解决办法
qq_43637218的博客
06-09 4683
解决el-input-number无法实时校验
vue el-input修改值不生效
cyhhhhhh的博客
06-10 1435
vue el-input v-model绑定之后清除不了，是因为绑定的值没有在对象中，比如绑定了searchData.example,设置searchData的example为空时不生效，是因为searchData没有example属性，双向绑定不生效，所有在searchData里给example设置一个初始值就好了。 ...
el-input输入框使用oninput或onkeyup后，v-model双向绑定失效
07-03
当在 Vue 中使用 `el-input` 组件并尝试结合 `oninput` 或 `onkeyup` 事件监听器与 `v-model` 双向数据绑定时，可能会遇到一个问题。这是因为 `v-model` 实际上是在底层自动触发 `input` 事件的，而当你手动添加了如 `oninput` 或 `onkeyup` 进行特定处理（例如实时验证、计数等），你可能无意中阻止了原始的 `input` 事件的自然触发。 Vue 期望每次 `input` 事件发生时都能更新视图和数据模型同步。如果你直接操作 DOM 修改了输入值，并没有让 Vue 内部跟踪到这个变化，那么 `v-model` 的双向绑定就不再生效。 为了解决这个问题，你需要确保： 1. **不阻止原生的 input 事件**：避免在 `oninput` 或 `onkeyup` 中调用 `event.preventDefault()` 或 `event.stopPropagation()` 来阻止默认行为，这样 Vue 的双向绑定才能正常工作。 2. **手动触发更新**：如果需要对输入进行自定义处理后更新模型，你应该在事件回调中手动调用 `this.$set(this, 'modelProperty', inputValue)`，这会告诉 Vue 触发视图的重新渲染。 ```javascript <input v-model="modelValue" @input="handleInput"> ... methods: { handleInput(event) { // 不阻止事件 this.modelValue = event.target.value; // 或者手动触发更新 this.$set(this, 'modelValue', event.target.value); } } ``` 记住，使用 `v-model` 已经包含了大部分基本的输入事件处理，除非有特殊需求，否则一般情况下不需要另外添加 `oninput` 或 `onkeyup`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值