vue中实现回车键登录功能

created() {
 let that = this;
 document.onkeypress = function(e) {
 var keycode = document.all ? event.keyCode : e.which;
 if (keycode == 13) {
 that.login();// 登录方法名
  return false;
 }
 };
 }

以上的代码，在这几天测试发现有一个问题，在登录进系统之后，从首页切换到其他界面，点击回车，会导致界面调整到首页！

要实现：

只在Login界面点击回车才执行onkeypress方法，其他的点回车均不触发(还不明白为什么在其他界面回车会执行Login界面的created-_-|| )

思路：

在Login.vue最外层绑定id，再绑定键盘事件。

$(“#loginDiv”).bind("keypress",toLogin);

测试发现监听不到按键事件，因为div元素没法获取焦点，但只要为div元素加上tabIndex属性就能获取焦点

<div tabIndex=-1></div>

以上方法虽然也能触发keypress，但还有点瑕疵~ 就是打开登录页时，需要鼠标点一下界面，才能触发keypress！！！

又一思路：界面中需要有一个聚焦，在回车时才好执行keypress。故在界面中加input文本框，让不管从哪里打开或跳到Login.vue都聚焦文本框

所以自定义指令：

 <div id="loginDiv" tabindex="1" style="outline:0;" >
 <input type="text" v-focus style="opacity:0;position:absolute;">
</div>
directives: {
 focus: {
 // 指令的定义
 inserted: function (el) {
 el.focus()
 }
 }
},

自定义指令及inserted用法截图自vue官网文档如下：

知识点补充：

vue项目里登录界面实现回车登录

方法一：

在vue的created钩子函数中写

 //登录添加键盘事件,注意,不能直接在焦点事件上添加回车
 // let that = this;
 // document.onkeydown = function (e) {
 //  e = window.event || e;
 // if(that.$route.path=='/login'&&(e.code=='Enter'||e.code=='Num Enter')){//验证在登录界面和按得键是回车键enter
 //  that.handleSubmit2('ruleForm2');//登录函数 （handleSubmit2('ruleForm2')-登录按钮的点击事件）
 // }
 // }

注意：只对主键盘的Enter管用

方法二：

在vue的created钩子函数中写

 var _self = this;
  document.onkeydown = function(e){
  var key = window.event.keyCode;
  if(key == 13 || key == 100){
   _self.handleSubmit2('ruleForm2');
  }
 }

对主键盘和小键盘的Enter都管用

总结

以上所述是小编给大家介绍的vue中实现回车键登录功能，希望对大家有所帮助，也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue登录以及权限验证相关的实现

    关键词:前后端分离.jwt.登录.权限验证 最近在做一个小应用,需要用到vue实现登录,以及给不同路由设置权限.在网上看了很多文章,讲的是乱七八糟.感叹国内技术类文章实在是差劲,抄来抄去.这篇文章就说说我最后是如何实现的. 前后端分离项目中,后端提供api接口给前端,使用jwt发放权限. 首先前端提供用户名和密码请求登录接口,后端验证之后返回给前端一个token,之后前端在请求需要权限的接口时携带这个token就可以了. 两个问题 现在面临两个问题, 首先vue中不同的路由有不同的权限,比如我要

  • vue.js项目 el-input 组件 监听回车键实现搜索功能示例

    基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIc

  • Vue中实现回车键切换焦点的方法

    几乎在所有浏览器中,都具有 Tab 键切换焦点的功能. 但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能. 为了交付上线拿到钱,我们只好再一次毫无原则性的接受了客户的需求. 在上一代人中,大多都有这种操作习惯.习惯把保存成为编辑,习惯用回车替换 Tab.这是受到微软 excel 荼毒的结果. 起初我以为这个功能很简单,无非就是把 Enter 键的功能转接到 Tab 键上面,分分钟就可以解决掉的问题. 可困难马上就出现了,我发现这条路是走不通的. 我们经常可以主动触发某个事件,比如 e

  • VUE:vuex 用户登录信息的数据写入与获取方式

    整体思路: 前台获取用户数据,向后台发送post请求,验证成功后 前台接受数据,改变用户登录状态 将登录状态及用户数据写入到state中 这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息 1. 向后台发送请求,若成功返回用户名,密码,使用 this.$store.dispatch('setLogin', true);将数据写入到state中 页面:login.vue 代码: this.loginData = await getUserI

  • vue中uni-app 实现小程序登录注册功能

    思路: 1.使用微信的 open-type="getUserInfo" 获取用户信息,将用户信息保存到userinfoDetails对象中去. <button v-else type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">预约挂号</button> 2.使用 u

  • Vue 使用beforeEach实现登录状态检查功能

    使用VueRouter的beforeEach钩子函数,可以实现导航跳转前检查登录状态的需求. 1.在登录请求接口时返回用户的信息,比如 userInfo:{userId:'123', userName:'小明'},登录成功之后将userInfo存入store中. 2.使用beforeEach实现登录状态检查 vueRouter.beforeEach((to, from, next) => { //store的getters中定义获取用户信息的函数 getUser //userId为空说明用户未登

  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解

    微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

  • vue中实现回车键登录功能

    created() { let that = this; document.onkeypress = function(e) { var keycode = document.all ? event.keyCode : e.which; if (keycode == 13) { that.login();// 登录方法名 return false; } }; } 以上的代码,在这几天测试发现有一个问题,在登录进系统之后,从首页切换到其他界面,点击回车,会导致界面调整到首页! 要实现: 只在Log

  • vue+tp5实现简单登录功能

    vue+tp5实现简单登录功能

    本文实例为大家分享了vue+tp5实现简单登录功能的具体代码,供大家参考,具体内容如下 准备工作:安装vue-cli,element-ui,package.json中如图所示,看着安装吧 1.在src目录下新建一个views放置页面 2. 在/src/router/index.js中写入: import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' i

  • vue中实现高德定位功能

    一.获取key及在index.htm中引入 首先需要成为高德开发者,申请到适合项目的key.并在index.html中进行引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=d79ff396531b948ce14d5be1c733fc36"></script> 二.在配置文件中进行相应配置 根据vue脚手架的不用需要在不同的文件

  • vue中添加语音播报功能的实现

    vue中添加语音播报功能的实现

    1:首先把我们的静态资源文件加入到前端工程项目当中 我这里mp3文件就是要播报的语言文件 2: 页面中加入标签 <!-- src 后面的链接是我保存在static文件下的一段报警声 --> <audio v-show="false" id="audioSuccessIn" src="/static/successIn.mp3"/> <audio v-show="false" id="au

  • Vue中保存用户登录状态实例代码

    首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个用户名,并将上面的"登录注册"字样变为"用户名". 为了保证用户刷新后用户名不会消失,这里我用到了sessionStorage 代码如下: register.vue中用户点击登录触发signIn方法 signIn(){ this.formData = $(".

  • Vue中的验证登录状态的实现方法

    Vue项目中实现用户登录及token验证 先说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据 使用axios请求登录接口,匹配账号和密码 账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首页 前端每次跳转时,就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面. 注销后,就清除sessionStorage里的token信息

  • Java web项目中的强制登录功能实现代码

    为了避免直接进入项目中存在的页面,使用filter过滤器 新建一个类loginFilter: package com.tjcu.filter; import com.tjcu.entity.User; import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSe

  • vue中button标签样式和功能禁用的写法

    vue中button标签样式和功能禁用的写法

    目录 button标签样式和功能禁用 1.不选中情况下 2.选中情况下 3.代码 vue el-button样式自定义 用按钮切换界面 button标签样式和功能禁用 需求:常用的表格编辑功能,都是只有选中某行数据才能显示样式编辑和内容编辑,不选中为灰度且不能编辑(次编辑一般为弹框修改内容) 1.不选中情况下 2.选中情况下 3.代码 样式禁用: :class="{disable: selections.length == 0}" 功能禁用: :disabled="selec

  • Django项目中实现使用qq第三方登录功能

    使用qq登录的前提是已经在qq互联官网创建网站应用并获取到QQ互联中网站应用的APP ID和APP KEY 1,建路由 # qq登录 path('loginQq/',qq.loginQq,name='loginQq/'), path('returns/',qq.returns,name='returns/'), 2,前端页面写qq登录的链接,本文没有用图标,暂时使用a链接请求. <a data-wow-delay=".5s" href="/blog/loginQq/&q

随机推荐