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();
}
});
vue中Enter触发登录事件和javascript中Enter触发点击事件的更多相关文章
- jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...
- 解决JavaScript拖动时同时触发点击事件的BUG
在做在线地图项目的时候,在给marker点绑定事件时,因为有点击事件click,同时又存在拖动dragEnd事件,首先没有重大缺陷,就是在用户在点击的时候,有时候本想是点击,但是他触发了drag的事件 ...
- 解决jQuery ajax动态新增节点无法触发点击事件的问题
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...
- JS实现按下按键触发点击事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Echarts如何添加鼠标点击事件?防止重复触发点击事件
Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...
- view.performClick()触发点击事件
1.主要作用 自动触发控件的点击事件 2.界面的布局文件 activity_main.xml <RelativeLayout xmlns:android="http://schema ...
- 关于AJAX异步加载节点无法触发点击事件问题的解决方式
做练习的过程中遇到一个问题,使用AJAX异步新增一个节点,无法触发点击事件,经过查阅之后知道一个方式,使用JS的委托事件,在此做一个记录. $(document).on('click', '.recr ...
- 可以触发点击事件并变色的UILabel
可以触发点击事件并变色的UILabel 谁说UILabel不能够当做button处理点击事件呢?今天,笔者就像大家提供一个改造过的,能够触发点击事件并变色的UILabel:) 效果图: 还能当做计时器 ...
- JS事件 什么是事件?JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...
随机推荐
- 监控io性能、free、ps命令、查看网络状态、Linux下抓包 使用介绍
第7周第2次课(5月8日) 课程内容: 10.6 监控io性能 10.7 free命令10.8 ps命令10.9 查看网络状态10.10 linux下抓包扩展tcp三次握手四次挥手 http://ww ...
- Qt的安装
由于之前用的vs2017是集成c++环境的,加之dev c++ 编码管理起来不是很方便,Mytc (win10不支持) ,所以转而向Qt 开发工具,以下是大概安装过程 下载地址 清华源:https:/ ...
- Android Activity生命周期及启动模式
曾经搞过许多东西,再熟练的东西一段时间没有碰都会生疏或忘记.后来体会到写成文档记录下来的重要性,但有些word或ppt记录下来的东西随着时间流逝会丢失,或者不愿去看.或许保存成博客的形式,会是更好的选 ...
- Spring MVC上传文件原理和resolveLazily说明
问题:使用Spring MVC上传大文件,发现从页面提交,到进入后台controller,时间很长.怀疑是文件上传完成后,才进入.由于在HTTP首部自定义了“Token”字段用于权限校验,Token的 ...
- idea建立项目关联到git仓库操作步骤
eg:创建一个名为demo的git项目 创建git远程项目,命名为[/demo] 在[D:\workspace\gf]创建本地项目[demo] 在idea里选择[VCS]->[Checkout ...
- ajax异步请求的常见方式
首先先介绍下ajax,ajax(ASynchronous JavaScript And XML)为异步的javascript和xml.所谓的异步和同步是指: 同步:客户端必须等待服务器的响应,在等待期 ...
- BZOJ11208 宠物收养所
最近,阿Q开了一间宠物收养所.收养所提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物.每个领养者都希望领养到自己满意的宠物,阿Q根据领养者的要求通过他自己发明的一个特殊的公式,得出该领养者希 ...
- C++ 代码小技巧(一)
在写代码的时候,我们常常会用一些小技巧,下面做简单介绍 一.o1+o2+o3(常数优化) 如题,开优化开关. 有的OJ上有O2优化选项,当然,你也可以这样:在代码开头这样加一句: #pragma GC ...
- Zabbix 监控MySQL、Apache、Nginx应用监控
zabbix对第三方应用软件的监控,主要有两个工作难点,一个是编写自定义监控脚本,另一个是在编写模板并导入zabbix web中,编写脚本这个要根据 监控需求定制即可,而编写模板文件有些难度,不过网上 ...
- usb2.0高速视频采集之68013A寄存器配置说明
任何的固件编程离不开与与原理图参考,图纸中所采用的是USB的Slave_fifo传输方式,具体配置与图纸对应即可. •USB_IFCLK:同步Slave_FIFO模式,输入频率范围5M-48M,在FP ...