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触发点击事件的更多相关文章

  1. jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...

  2. 解决JavaScript拖动时同时触发点击事件的BUG

    在做在线地图项目的时候,在给marker点绑定事件时,因为有点击事件click,同时又存在拖动dragEnd事件,首先没有重大缺陷,就是在用户在点击的时候,有时候本想是点击,但是他触发了drag的事件 ...

  3. 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...

  4. JS实现按下按键触发点击事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Echarts如何添加鼠标点击事件?防止重复触发点击事件

    Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...

  6. view.performClick()触发点击事件

    1.主要作用 自动触发控件的点击事件 2.界面的布局文件  activity_main.xml <RelativeLayout xmlns:android="http://schema ...

  7. 关于AJAX异步加载节点无法触发点击事件问题的解决方式

    做练习的过程中遇到一个问题,使用AJAX异步新增一个节点,无法触发点击事件,经过查阅之后知道一个方式,使用JS的委托事件,在此做一个记录. $(document).on('click', '.recr ...

  8. 可以触发点击事件并变色的UILabel

    可以触发点击事件并变色的UILabel 谁说UILabel不能够当做button处理点击事件呢?今天,笔者就像大家提供一个改造过的,能够触发点击事件并变色的UILabel:) 效果图: 还能当做计时器 ...

  9. JS事件 什么是事件?JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...

随机推荐

  1. 转:<context:component-scan>使用说明

    在xml配置了这个标签后,spring可以自动去扫描base-pack下面或者子包下面的java文件,如果扫描到有@Component @Controller@Service等这些注解的类,则把这些类 ...

  2. .Net Core使用Ocelot网关(一) -负载,限流,熔断,Header转换

    1.什么是API网关 API网关是微服务架构中的唯一入口,它提供一个单独且统一的API入口用于访问内部一个或多个API.它可以具有身份验证,监控,负载均衡,缓存,请求分片与管理,静态响应处理等.API ...

  3. 【Elasticsearch 7 探索之路】(五)搜索相关 Search-API

    本节主要讲解 Elasticsearch 的 搜索相关功能 Search-API,讲解什么是 URL Search 和 Request Body Search 的语法,对常用的语法都会一一进行详细介绍 ...

  4. emmet的html和css使用技巧大全

    emmet html使用技巧大全 ! 初始化 >:后代+:兄弟^:向上*:乘法$:数字():分组#:id命名.:类命名 一.id,类命名p#infop.infoa[href=#] 二.后代:di ...

  5. 第一节知识点:.net与c#的概念

    1.什么是.net          .net一般指的是.NET Framework框架,一种平台,一种技术:.NET 是微软的新一代技术平台,以构建互联互通的应用系统.这些应用程序的开发和运行必须有 ...

  6. ARTS-S C语言多线程传参数

    #include <stdio.h> #include <stdlib.h> #include <pthread.h> #include <unistd.h& ...

  7. ARTS-S 在docker中运行本地脚本

    很多情况是本地没有编译环境,但docker中有编译环境.想编译本地代码,就要把本地的代码和编译脚本映射到docker中,脚本如下: docker run \ -it \ -v /Users/usern ...

  8. 使用aop切面编写日志模块

    我们先自定义一个注解(一个有关自定义注解的LJ文章 https://www.cnblogs.com/guomie/p/10824973.html) /** * * 自定义日志注解 * Retentio ...

  9. 【React】282- 在 React 组件中使用 Refs 指南

    英文:Yomi Eluwande  译文:joking_zhang https://segmentfault.com/a/1190000019277029 使用 React 时,我们的默认思维方式应该 ...

  10. 【Spring Boot】定时任务

    [Spring Boot]定时任务 测试用业务Service package com.example.schedule.service; import org.springframework.ster ...