vue.js 添加键盘回车事件

绝地灬酷狼 2023-10-09 05:32 26阅读 0赞

方法一：

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

//登录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进行了封装，原事件就不起作用了，代码如下：

**最后附上一下常用键：**

@keyup.13 回车

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

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

**还有一些组合键：**