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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
利用JS实现数字增长
Jul 28 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
jQuery+ajax实现文件上传功能
Dec 22 jQuery
javascript canvas实现雨滴效果
Jun 09 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生成静态页面详解
2006/11/19 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
Python的词法分析与语法分析
2013/05/18 Python
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
Python同步遍历多个列表的示例
2019/02/19 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
python实现人脸签到系统
2020/04/13 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
优秀员工评优方案
2014/06/13 职场文书
社会工作专业自荐信
2014/09/26 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS