关于vue elementui 中的input键盘监听事件

最新推荐文章于 2024-07-24 15:08:13 发布
最新推荐文章于 2024-07-24 15:08:13 发布
阅读量5.3k 收藏 4
点赞数 1
文章标签： javascript ui ViewUI
原文链接：https://juejin.im/post/5b3ed710f265da0f4860f5ee
版权

项目中使用vue+elementUi, 由于习惯，做登录时喜欢敲回车，需要做监听事件，

    然后发现用vue按键修饰符@keyup.enter = 'login'; 竟然无效，后来看了一下元素，发现el-input在最外层包了一层div，  
还需要加上.native才能生效 eg: @keyup.enter.native = 'login'; 也算是学习~复制代码

转载于:https://juejin.im/post/5b3ed710f265da0f4860f5ee

weixin_33989780
关注
el-input中监听键盘事件“回车”和“Tab”
Linzsong的博客
03-30 1443
el-input中监听键盘事件“回车”和“Tab” <el-input @keyup.enter.native="test($event)" @keydown.tab.native="test($event)"> </el-input> <!-- 注意这里的Tab键 要使用 keydown监听，使用keyup监听无效，具体原因，希望有热心的网友给予指正--> test(e) { e.preventDefault(); // 阻止Tab的默认事
elementUI中input框无法输入的问题及原因
大白兔学编程的博客
06-05 1万+
新增的时候input突然不能输入内容了 就是输入不进去 解决1. 猜想就是输入内容没渲染，这里用@input="change($event)"方法监听input输入，this.$forceUpdate()手动渲染 <el-input v-model="dataForm.listingNumber"@input="change($event)" placeholder="挂牌号" /> change (e) { this.$forceUpdate() } 解决2. 后来发现这样做还要
element-ui 搜索框组件：监听input键盘事件 - 代码篇
草巾冒小子的博客
03-02 1万+
踩坑：element-ui 框架监听input键盘事件 - 含demo演示 代码篇代码示下： &amp;amp;lt;el-input placeholder=&amp;quot;职位 | 地区 | 工作年限&amp;quot; v-model=&amp;quot;searchVal&amp;quot; @keyup.enter.native=&amp;quot;onEnterSearch&amp;quot;&amp
el-input的按键监听
weixin_44010599的博客
03-13 982
今天给搜索框加按键监听，发现这样写不起作用 <el-input v-model="form.input" style="width: 300px;" @keyup.enter="submitForm()"></el-input> 解决方法：使用.native修饰符 <el-input v-model="form.input" style="width: 300px;" @keyup.enter.native="submitForm()"></el-input&gt
【element ui】input输入控件绑定粘贴事件，从 Excel 复制的数据粘贴到输入框（el-input）时自动转换为逗号分隔的数据
最新发布
DecorateCC的博客
07-24 743
希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~❤️原创不易，期待你的关注与支持~😊之后我会继续更新前端学习小知识，关注我不迷路~
el-input 监听键盘回车事件，且不触发换行
Khada_Finger的博客
09-18 3116
关于 el-input 触发回车事件，但不触发换行的问题。
el-input 监听输入事件、键盘事件、粘贴事件、失去焦点事件
热门推荐
大前端
12-31 1万+
@paste.native=“usernamePaste” 监听粘贴事件 @keyup.native=“userNameInput($event)” 监听键盘事件 <el-input placeholder="请输入身份证号" @paste.native="usernamePaste" @keyup.native="userNameInput($event)" id="username" v-model="usern
vue+elementUi 实现密码显示/隐藏+小图标变化功能
10-15
- 事件修饰符：如`.native`和`.enter`，分别用于监听原生DOM事件和特定键盘事件。 - 插槽（slot）：Vue组件中，用来允许开发者向组件内部插入自定义内容的机制。 以上知识点结合了Vue框架的特性与Element UI组件库...
html5响应键盘事件,vue监听键盘事件的相关总结
weixin_29323273的博客
06-05 680
这篇文章主要介绍了vue监听键盘事件的相关总结，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下按键修饰符在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码...
Vue中通过键盘事件去除输入框中空格
ForgivenCheney的博客
08-04 1706
[Talk is cheap. Show me the code] 不想看理论知识请直接移步最后代码示例。 一、项目场景 项目业务基于Vue以及ElementUI下的后台管理系统，其中涉及到对表单的正则验证，表单验证的要求是去除输入框中的空格，并将字母进行大写转换。 二、遇到的问题 最初的解决思路： Vue本身提供了去除空格的修饰符 v-model.trim 所以可以通过 v-model.t...
element-ui的el-input添加键盘事件
qq_52940988的博客
04-03 1930
需要加上.native才能生效，如enter事件 @keyup.enter.native="方法"
element ui中的el-input回车键事件
u010613970的博客
07-26 1万+
今天项目里面的登录页面，需要按键盘回车键就直接登录，但是测试的时候，按了回车键后，直接刷新页面了，这不是我想要的，之后网上查了一下。上面的写法没问题，但是这样又会出现一个问题，当form表单中只有一个input框时，按回车键，页面还是刷新的。解决文案就是给form加一个@submit.native.prevent就可以阻止表单默认的提交行为。之后再查了一下，原来form表单只有一个Input框时，回车键默认为表单提交的事件。...
解决element el-input添加键盘事件
weixin_43840538的博客
09-02 3979
el-form组件默认不支持回车提交，需要做如下修改 实现方式 在el-form添加 @submit.native.prevent ， 然后在el-input中绑定键盘事件 <el-form @submit.native.prevent> <el-form-item> <el-input ...
vue使用element-ui的el-input监听不了键盘事件解决
小白很黑
10-09 1298
vue使用element-ui的el-input监听不了键盘事件，原因应该是element-ui自身封装了一层div在input标签外面，键盘事件添加在了div上，而非input上面，所以如下代码运行是无效果的： &lt;el-input v-model="name" placeholder="用户名" @keyup.enter="user"&gt;&lt;/el-input&gt; 解决方法...
el-input键盘事件（空格搜索）
weixin_30411239的博客
08-09 907
element 组件的话 利用 @keyup.enter.native="handleSearch" 绑定 搜索事件 非 element-UI 组件，直接@keyup.enter 就可以。 转载于:https://www.cnblogs.com/listen9436/p/11328602.html...
Element UI的组件el-input添加回车键监听事件
BigFamer的博客
12-13 1万+
纵观Element UIde input输入框组件（el-input组件），都没有发现可以给输入框添加的回车键监听事件，因为Element UI对其做了进一步封装，对比原生HTML的input标签的监听键盘（回车键）事件： // 回车提交表单 document.onkeydown = function (e) { // 兼容FF和IE和Opera var theEvent = window.event || e; var code = theEvent.keyCode || theEve
Element-ui vue 键盘快捷键事件
weixin_37699645的博客
11-27 3777
vue + Element-ui +快捷键事件
vue 组件销毁结束键盘监听事件怎么做
05-30
在 Vue 组件销毁时，需要对之前添加的键盘事件监听进行解绑，以免出现内存泄漏的问题。可以在组件的 `beforeDestroy()` 钩子函数中解绑键盘事件监听器。 例如，如果你在组件的 `created()` 钩子函数中添加了监听...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值