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 函数或程序的事件. 比如说,当用户单击 ...
随机推荐
- java关键字 保留字
Java 关键字和保留字 Java 关键字列表 (依字母排序 共51组): abstract, assert,boolean, break, byte, case, catch, char, clas ...
- VLAN实验1(VLAN基础配置及Access接口)
本实验基于<HCNA网 络技术实验指南> 本实验使用eNSP软件 原理概述: 早期的局域网技术是基于总线型结构的.总线型拓扑结构是由一根单电缆连接着所 有主机,这种局域网技术存在着冲突域问 ...
- PAT甲级专题|树的遍历
PAT甲级专题-树的遍历 涉及知识点:树.建树.深度优先搜索.广度优先搜索.递归 甲级PTA 1004 输出每一层的结点,邻接表vector建树后.用dfs.bfs都可以边搜边存当前层的数据, #in ...
- HTML+CSS的小实例
通过一个月以来对HTML5+CSS的学习.这篇随笔给大家来做一个简单的网页中常见的导航栏. 这些都称之为网页中的导航栏. 我简单的做了一个某宝和58同城的导航栏,供大家学习参考. 一.58同城导航栏: ...
- CSS3 斑马条纹.html
hvkhujluhijo hvkhujluhijo hvkhujluhijo hvkhujluhijo hvkhujluhijo <!DOCTYPE html> <html> ...
- ThinkPHP的视图和模板
简单来说一个控制器对应一个视图,一个方法对应一个模板下面我们直接上图. 二.给模板赋值 给模板赋值在这里用到了assign()这个函数,assign()函数第一个参数为给这个值自定义名称,第二个参数则 ...
- react-native Android release打包失败
npm run build报错(android) react-native 0.5x在安卓环境 gradle 3.x版本下编译release版本的时候提示编译失败,但是debug模式下是没有问题的. ...
- Spring Boot整合Servlet、Filter、Listener
整合 Servlet 方式一: 编写 servlet package com.bjsxt.controller; import javax.servlet.ServletException; ...
- HDU1079 Calender Game
Adam and Eve enter this year’s ACM International Collegiate Programming Contest. Last night, they pl ...
- ARTS-S redis3.2.10通过ip访问
只用把配制文件里的bind 127.0.0.1改成0.0.0.0,然后重启即可.不用再有别的配制.