vue全部的按键别名:

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

vue中

<input v-on:keyup.enter="submit">  缩写:<input @keyup.enter="submit">
<input type="text" @keyup.enter="test(1)">

在使用过程中,如果页面只针对一个Input添加键盘enter事件,可以直接按照官方文档定义的别名增加相应事件就可以了

<el-button type="success" @click.enter="watchEnter()">登录</el-button>  无效写法

但是如果是要对页面的button添加enter键盘事件,就不能写在input或者button上,因为获取不到焦点,这时候可以直接写在created里,如下:

写法一

created() {
var _this = this;
document.addEventListener("keydown", _this.watchEnter);
},
destroyed() {
//移除监听回车按键
var _this = this;
document.removeEventListener("keydown", _this.watchEnter);
},
methods:{
//监听回车按钮事件
watchEnter(e) {
var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
//判断如果用户按下了回车键(keycody=13)
if (keyNum == 13) {
按下回车按钮要做的事
}
},
}

写法二 

mounted(){
let _this = this;
document.onkeydown = function(e) {
var key = window.event ? e.keyCode : e.which;
if (key == 13) {
console.log('000')
_this.submitForm(_this.formName);
}
}
},

destroyed() {
        document.onkeydown = null;
    }

 

enter键的使用的更多相关文章

  1. 按Enter键后Form表单自动提交的问题

    怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然 ...

  2. 按下enter键后表单自动提交问题

    在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Aja ...

  3. WPF 让Enter键按下时默认为某按钮(Button)事件

    在编写web程序时我们经常用到按Enter键来提交表单,在WPF中我们也常常需要这样的功能:例如在填写登录框信息时当填写完密码之后我希望直接按Enter键就能完成登录操作.这个需求如何来完成呢? 其实 ...

  4. javascript之小积累-.-添加form表单查询的enter键支持

    /*  * 列表查询的enter键支持  * author by 清风  */ function enterEvent() {   document.onkeydown = function(even ...

  5. js防止回车(enter)键提交表单及javascript中event.keycode

      如何防止回车(enter)键提交表单,其实很简单,就一句话.onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里 ...

  6. 关于android软键盘enter键的替换与事件监听

    android软键盘事件监听enter键  软件盘的界面替换只有一个属性android:imeOptions,这个属性的可以取的值有 normal,actionUnspecified,actionNo ...

  7. JS实现登录页面记住密码和enter键登录

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

  8. form表单按enter键自动提交的问题

    废话不多说.直接上代码. 1:form表单按enter键自动提交的情况 <!doctype html> <html lang="en"> <head& ...

  9. 点击Enter键,文本框焦点改变 分类: WinForm 2014-04-15 10:30 223人阅读 评论(0) 收藏

    一个例子: 一个简单的 登陆界面,有用户名.密码文本框.登陆按钮.  想要实现的效果是,用户输入用户名之后,点击Enter键进入到下一个文本框,同理,输入完密码之后,登陆按钮获得焦点,再次点击Ente ...

  10. jQuery实现按Enter键触发事件?

    按Enter触发 $(function(){ document.onkeydown = function(e){ var ev = document.all ? window.event : e; ) ...

随机推荐

  1. 【CSS】352- 有趣的CSS弹跳动画

    点击上方"前端自习课"关注,学习起来~ 这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴 ...

  2. 【JS】332- 为什么我更喜欢对象而不是 switch 语句

    昨天偷懒了,欢迎点击关注???这样我就多更大的动力日更了- 正文从这里开始~~~ 最近(或者不是最近,这完全取决于您什么时候阅读这边文章),我正在跟我的团队伙伴讨论如何去处理这种需要根据不同的值去处理 ...

  3. oracle管理角色和权限

    介绍 这一部分主要看看oracle中如何管理权限和角色,权限和角色的区别在哪里. 当刚刚建立用户时,用户没有任何权限,也不能执行任何操作.如果要执行某种特定的数据库操作,则必需为其授予系统的权限:如果 ...

  4. .net下DllImport的一个小问题

    最近搞几个PInvoke几个DLL, 在.net 2.0下木有问题, 跑的很好 如下: [DllImport( "tjo.dll" )] private static extern ...

  5. 常见面试题之*args

    这个地方理解即可,只是面试的时候会被问到,单独做了一下知识点的整理,不推荐使用. def self_max(a,b,c,d,e,f,g,h,k,x=1,y=3,z=4): #默认参数 print(a, ...

  6. 利用PyCharm操作Github(二):分支新建、切换、合并、删除

      在文章利用PyCharm操作Github:仓库新建.更新,代码回滚中,我们已经学习到了如何利用PyCharm来操作Github,其中包括了一些常见的Github操作:仓库的新建.更新以及代码回滚. ...

  7. 张亦总结《AG百家乐庄闲,龙虎中下三路技巧和三株路的运用》

    ​​关于三珠路的各种打法,这里我做个详细的讲解 三珠路的打法源于澳门赌王叶汉,需要了解赌王叶汉的著作<BJL投注公式>的可以加我Q:<10353581>进行详细解答 叶汉的打法 ...

  8. CQRS+ES项目解析-Equinox

    今天我们来分析另一个开源的CQRS+ES项目:Equinox.该项目可以在github上下载并直接本地运行,项目地址:https://github.com/EduardoPires/EquinoxPr ...

  9. 一起学Vue之模板语法

    概述 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTM ...

  10. JS---BOM---定时器

    定时器 参数1:函数 参数2:时间---毫秒---1000毫秒--1秒 执行过程: 页面加载完毕后, 过了1秒, 执行一次函数的代码, 又过了1秒再执行函数..... 返回值就是定时器的id值   v ...