vue中使用js绑定键盘回车键

<button id='loginButton' @click='login'>登录</button>

enterButton() {
      //回车登陆
      document.body.onkeydown = function (event) {//当键盘摁下时触发
        if (event.key == "Enter") {//判断当摁下的键为回车时触发
          document.getElementById("loginButton").click();//获取id为loginButton的节点并点击
        }
      };
    },
    login(){
		console.log('登录');
	}

注意:enterButton方法要在created中调用

如果有多个登录按钮时可以拿一个值进行判断,在切换按钮时对logins进行重新赋值

<button id='loginButton1' @click='login'>登录</button>
<button id='loginButton2' @click='login'>登录</button>
data(){
	retunr:{
		logins:true
		}
}

enterButton() {
      //回车登陆
      var a = this;//这里将this赋值给a,因为下面方法内拿不到this
      document.body.onkeydown = function (event) {//当键盘摁下时触发
        if (event.key == "Enter") {//判断当摁下的键为回车时触发
	        if(a.logins){//判断是否为true
	          document.getElementById("loginButton1").click();//获取id为loginButton1的节点并点击
	        }else{
	          document.getElementById("loginButton2").click();//获取id为loginButton2的节点并点击
	        }
	        }
      };
    },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值