vue.js 添加键盘回车事件

 

方法一： 

现在需要给登录按钮添加一个键盘回车事件，只要一按回车键就会触发登录的方法。

//登录html 部分
<el-form-item>
    <div class="enter_item item3 ">
        <div class="enter_btn"  type="submit" @click="submitForm('FormData')"  >登录 </div>          
    </div>
</el-form-item>

//登录js

created() {//创建后挂载
    
      var _this = this;

            document.onkeydown = function(e){

                var key = window.event.keyCode;

                if(key == 13){

                    _this.submitForm('FormData');//登录的方法

                }

            }
  },

//登录的方法
  submitForm(formName) { 
    
      this.$refs[formName].validate(valid => {
        if (valid) {
       
       //调用登录接口，提交登录数据
        //这里执行登录成功的回调
        

      }else{
       console.log("error submit!!");
          return false;
      }
   
    },

方法二：

给登录的input框回车事件，触发登录的方法。

如果是原生的input，使用 @keyup.enter就可以，若是使用了element-ui，则要加上native限制符，因为element-ui把input进行了封装，原事件就不起作用了，代码如下：

<input v-model="FormData.password" placeholder="请输入密码" @keyup.enter="submitForm('FormData')">

<el-input v-model="FormData.password" placeholder="请输入密码" @keyup.enter.native="submitForm('FormData')">
</el-input>

最后附上一下常用键：

@keyup.13 回车

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

@keyup.delete 删除键(捕获 “删除” 和 “退格” 键)

还有一些组合键：

@keyup.ctrl

@keyup.alt

@keyup.shift

@keyup.meta(window系统下是window键，mac下是command键)

Alt + C :

<input @keyup.alt.67="doSth">

Ctrl + Click :

<div @click.ctrl="doSth">点我</div>