vue中实现回车键登录功能


Posted in Javascript onFebruary 19, 2020
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中实现回车键登录功能

知识点补充:

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中实现回车键登录功能,希望对大家有所帮助,也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript操作xml
Nov 04 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 #Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 #Javascript
Vue常用的全选/反选的示例代码
Feb 19 #Javascript
详解node和ES6的模块导出与导入
Feb 19 #Javascript
JS实现分页导航效果
Feb 19 #Javascript
vue随机验证码组件的封装实现
Feb 19 #Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 #Javascript
You might like
php自动适应范围的分页代码
2008/08/05 PHP
header跳转和include包含问题详解
2012/09/08 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
利用Python演示数型数据结构的教程
2015/04/03 Python
Python通过future处理并发问题
2017/10/17 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
Python读取实时数据流示例
2019/12/02 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
网站开发实习生的自我评价
2013/12/11 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
结婚通知短信大全
2015/04/17 职场文书
摘录式读书笔记
2015/07/01 职场文书