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. 【H5】316- 移动端H5跳坑指南

    最近在一个移动端的 Web 项目中踩了很多的坑,感觉有必要把它们记录下来,分享给即将踏入移动端 Web 开发大门的朋友们,更好的解决ios和android兼容. 1.input获取焦点时,页面被放大 ...

  2. java_冒泡排序

    public static void main(String[] args){ int[] arr= {321, 43, 45, 76, 8, 6, 9, 1, 3, 63, 43}; for(int ...

  3. Mybatis sql map 小于号配置

    Mybatis SQL map配置中出现小于号转义时,通过<![CDATA[查询条件]]>解决. EXCEMPLE: <select id="getComments&quo ...

  4. thinking in java 阅读收获

    <thinking in java>,国内翻译为<JAVA编程思想>,一直听说该书写的非常好,今日研读,果然有所收获,特在此记录一些阅读时点点滴滴的收获. 1.  “基本数据类 ...

  5. 你不知道的JavaScript(中)读书笔记(一)

    第一章 1.内置类型 JavaScript有七种内置类型[除了对象以外,其他统称为“基本类型”]: 空值(null) 未定义(undefined) 布尔值(boolean) 数字(number) 字符 ...

  6. java基础-初识类

    一 前言 在 <[java基础]-谈谈对面向对象理解 >一文中已经知道什么是对象,如何创建对象:这篇文章主讲对象的类型,简称类: 二 类介绍 2.1 类 每个对象都有一个类型,通常在所有的 ...

  7. 想要入行web前端要知道web前端的的基本工作职责

    入一行,要先知一行 ”:我们来看看web前端开发职位 无论什么门派都要做到的一些基本工作职责 首先,你必须是一个合格的“页面仔”,这个叫法不好听,但很生动: 我们都知道,所有呈现的内容都是基于HTML ...

  8. Python活力练习Day2

    Day2:求1000以内的素数 #素数:除了1和它本身外,不能被其他自然数整除 #判断素数的方法:1).暴力法:从2到n-1每个数均整除进行判断   2).开根号法:从2到sqrt(n)均做整除判断( ...

  9. centos7安装python3.7.4

    yum install gcc make zlib  zlib-devel openssl openssl-devel libffi-devel bzip2-devel ncurses-devel g ...

  10. React组件的属性

    组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...