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. Java并发:线程限制

    最近又学到了很多新知识,感谢优锐课老师细致地讲解,这篇博客记录下自己所学所想,也和大家分享.了解有关Java中的并发问题和线程限制的更多信息. 在此文中,我们将探讨线程限制,它的含义以及如何实现.因此 ...

  2. Python3 类的继承

    目录 继承的基本概念 什么是继承 继承有什么用 如何实现继承 初识继承 寻找继承关系 如何寻找继承关系 实例演示 继承背景下的对象属性查找顺序 派生 新式类和经典类 钻石继承 通过继承实现修改json ...

  3. 016_List/Set/Map

    先写一下3这种遍历方法 for循环 List<Teacher> list = new ArrayList<>(); list.add(new Teacher("张三& ...

  4. kubernetes-集群备份和恢复

    一.备份   思路: ①集群运行中etcd数据备份到磁盘上 ②kubeasz项目创建的集群,需要备份CA证书文件,以及ansible的hosts文件   [deploy节点操作] 1:创建存放备份文件 ...

  5. HTML5变化

    HTML5变化 新的语义化元素 header footer nav main article section 删除了一些纯样式的标签 表单增强 新API 离线 (applicationCache ) ...

  6. 建议收藏:命令创建.net core3.0 web应用详解(超详细教程)

    你是不是曾经膜拜那些敲几行代码就可以创建项目的大神,学习了命令创建项目你也可以成为大神,其实命令创建项目很简单. (1)cmd命令行到你打算创建项目的位置   (2)在该目录下创建解决方案文件夹JIY ...

  7. 【Java Web开发学习】Spring JPA

    [Java Web开发学习]Spring JPA 转载:https://www.cnblogs.com/yangchongxing/p/10082864.html 1.使用容器管理类型的JPA JND ...

  8. 人生苦短,我用Python(1)

    1.Python保留字与标识符 保留字是Python语言中一些已经被赋予特定意义的单词,开发程序时,不可以把这些保留字作为变量.函数.类.模块和其他对象的名称来使用. and as assert br ...

  9. python之MiniWeb框架

    以往,我们多完成的是静态web服务器,主要处理的都是一些已经‘写死’的数据,那么今天,我们来学习一下动态数据的处理. 说到动态数据,我们就需要了解一个东西,那就是web框架. 所谓web框架简单地说就 ...

  10. 《Java基础知识》Java异常处理详解

    1. Java 中的异常 前言:Java 中的异常处理是处理程序运行错误时的强大机制之一,它可以保证应用程序的正常流程. 首先我们将了解java异常.异常的类型以及受查和非受查异常之间的区别. 1.1 ...