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 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
JavaScript中实现块作用域的方法
Apr 01 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
python实现从web抓取文档的方法
2014/09/26 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
包装类的功能、种类、常用方法
2012/01/27 面试题
商务日语专业毕业生求职信
2013/10/26 职场文书
中英文求职信范文
2014/01/27 职场文书
中学生差生评语
2014/01/30 职场文书
财务部经理岗位职责
2014/02/03 职场文书
创先争优活动方案
2014/02/12 职场文书
学习保证书怎么写
2015/02/26 职场文书
小学英语课教学反思
2016/02/15 职场文书
导游词之襄阳古城
2019/09/27 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android