vue中Enter触发登录事件和javascript中Enter触发点击事件

created(){
window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件
}

在methods中当keyCode的值为13触发登录绑定的事件即可

// 登录登录登录
async changeUser () {
// 消息提示只弹出一个框
this.$message.closeAll() let s = checkPhone(this.dlPhone, 1) // 手机号
if (s.code === 500) {
this.$message(s.msg)
return
}
let ss = checkPhone(this.dlPassword, 2) // 密码
if (ss.code === 500) {
this.$message(ss.msg)
return
} // if (s.code == 200 && ss.code == 200) {
let res = await this.$http.post('/api/login', {
mobile: this.dlPhone,
password: this.dlPassword
})
if (res.data.code === 200) {
this.show = 2
this.$store.commit('CHANGE_LOGINFLAG', false)
this.$store.commit('CHANGE_COVER', false)
// 保存后台返回的用户信息
this.$cookies.set('logintoken', res.data.data.user_token, {
expires: getExpireTime(res.data.data.expire_time)
})
this.$store.commit('LOGIN_TOKEN', {
loginToken: res.data.data.user_token
})
localStorage.setItem('userInfo', JSON.stringify(res.data.data))
this.$store.commit('USERINFO', { userInfo: res.data.data })
localStorage.setItem('userId', JSON.stringify(res.data.data.user_id))
this.$store.commit('USER_ID', { userId: res.data.data.user_id })
} else {
this.$message({
message: '账号不存在或密码错误!'
})
}
},
// 键盘监听enter键登录
handleKeyDown (e) {
let key = null
if (window.event === undefined) {
key = e.keyCode
} else {
key = window.event.keyCode
}
if (key === 13) {
this.changeUser()
}
},

下面时js中Enter触发点击事件

<h3>按下 Enter 触发按钮点击事件</h3>
<p>选中输入框,然后按下"Enter" 就会触发按钮的点击事件。</p> <input id="myInput" value="一些文本..">
<button id="myBtn" onclick="javascript:alert('Hello World!')">按钮</button>
var input = document.getElementById("myInput");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("myBtn").click();
}
});
上一篇:安装Docker,Asp.net core


下一篇:解决echarts中的点击事件点击后走多次接口