onKeydown 应用-回车登录

onkeydown 事件

onkeydown 事件会在用户按下一个键盘按键时发生。

例子

vue 环境 html

     <div class="center">
      <div class="box">
        <i class="icon-name"></i>
        <input type="text" class="name" v-model="name" placeholder="请输入用户名"/>
      </div>
      <div class="box">
        <i class="icon-password"></i>
        <input type="password" v-model="password" class="password" placeholder="请输入密码" @keydown="keylogin"/>
      </div>
      <input type="button" id="keyBtn" class="primary button" value="登录" @click="login" />
    </div>
复制代码

  keylogin(e) {
      if (event.keyCode==13) {//回车键的键值为13)
        var toClick=document.getElementById("keyBtn")
        toClick.click();  //调用登录按钮的登录事件
      }
    },
    login(ev) {
      console.log(ev)
      $api.login({
        "username": this.name,
        "password": md5.getmd5(this.password)
      }).then(res => {
        if (res.data.code === 200) { //验证成功
          $cookie.setCookie('username', this.name);
          $cookie.setCookie('globalCookie', res.data.data);
          this.$router.push({
            'name': 'order'
          })
        } else { //验证失败
          this.$confirm(res.data.data, '提示', {
            confirmButtonText: '确定',
            type: 'error',
            center: true,
            showCancelButton: false,
            showClose: false
          })
        }
      }).catch(e => {
        //error
        console.log(e)
      })
    }
  }
复制代码

vue 语法糖

@key.enter 事件