enter对应的keycode_vue 添加enter回车事件

问题所在：今天遇到一个需求，给el-button组件添加点击事件，之前对这块一直一知半解，所以特此总结一下

解决方法：

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符，所以对一个普通的Vue input组件，可以这样实现一个回车事件：

//当点击了回车时，便会调用function函数

但是对于开发来说，键盘事件对应的keyCode比较难记，所以Vue 为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。

(别名可参考：https://blog.csdn.net/qq_38591756/article/details/88732443)

所以上面的代码，等同于：

//当点击了回车时，便会调用function函数

还有一种缩写语法(比较常用)：

//当点击了回车时，便会调用function函数

注意：

但是，如果是在自己封装的组件或者是使用一些第三方的UI库(比如element-ui)时，会发现并不起效果，这时就需要用到.native修饰符了，如：

v-model="inputName"

placeholder="输入你的名称"

@keyup.enter.native="searchPerson"

在使用过程中，如果页面只针对一个Input添加键盘enter事件，可以按照上面的情况解决。但是如果是要对页面的button添加enter键盘事件，就不能写在input或者button上，因为获取不到焦点，这时候可以直接写在created或者mounted里，直接绑定在document上。如下：

mounted() {

let that = this

document.onkeydown = function (e) {

e = window.event || e

//保证是在登录页面发出的enter事件

if ((that.$route.path === '/login'||that.$route.path === '/') && (e.code === 'Enter' || e.code === 'enter')) {

//调用登录函数

that.login();

}

enter对应的keycode_vue 添加enter回车事件相关推荐

vue 给页面添加enter回车事件 - 代码篇
vue 如何给页面添加enter回车事件? 主要代码: @keyup.enter.native="ajaxLoginApi()" 代码示例: <el-form ref=&qu ...
vue：添加enter事件，键盘敲下enter事件
vue项目中遇到点击查询按钮可以查出数据,点击回车键也能查出数据,所以就想点击回车键时调用查询方法. 示例代码如下: 一.第一步: 给input按钮绑定@keyup.enter:如果是要对页面的but ...
html回车按键确认按钮,button默认enter事件(回车事件)。
这里我介绍一下,button按钮默认回车(enter)事件.如果大家可以用submit,就不用看以下代码,因为submit可以直接默认回车事件(enter). 在这里特此声明,代码是通过jquery完 ...
wpf如何实现按钮的回车事件_c# – 在WPF中模拟Enter键
我试图在按钮事件中模拟按键.我可以使用下面的代码来模拟一些键,例如Backspace,但Enter不起作用. 我究竟做错了什么? private void btnEnter_Click(object ...
在 react 中添加enter键出搜索
在React 中enter 键的大致思路就是在document.body上添加"keyup/keydown"事件,然后在keycode=13即按下enter键时触发此事件. 接下来 ...
html 搜索框回车搜索,给搜索框添加回车事件
function search(){ //alert("test"); keyword=$("#gover_search_key").val(); turnke ...
可编辑div的一些方法总结（二）自定义空格和回车事件
在可编辑div中空格键是和 ' ',混合的,由于浏览器只识别第一个 ' ',所以项目中为了后期页面的自适应以及兼容性,决定将空格符统一为&nbsp:同样将回车键产生的不同标签替换为统一的 ...
VUE扫码枪中文输入法兼容自动回车事件(上)
背景最近产品想要在页面上加一个input输入框,想要手动输入,也想要扫码枪扫描输入,大家都知道扫码枪扫描后会自动出发input的回车enter事件的,我当初也是这么认为的,所以在input上就直接绑 ...
vue+element Form键盘回车事件页面刷新解决
问题描述:如下代码所示,使用element-ui 中的el-form组件对table进行条件查询,当查询条件仅有一项时,使用@keyup.enter.native事件绑定回车事件,出现点击回车后,浏览 ...

enter对应的keycode_vue 添加enter回车事件

enter对应的keycode_vue 添加enter回车事件相关推荐

最新文章

热门文章