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. scrapy的使用-Pipelines

    #------------------简单的对item操作方式----------------------------# import json class QsbkPipeline(object): ...

  2. 【Java Web开发学习】Spring MVC文件上传

    [Java Web开发学习]Spring MVC文件上传 转载:https://www.cnblogs.com/yangchongxing/p/9290489.html 文件上传有两种实现方式,都比较 ...

  3. python故障排除

    在初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的一些让程序 crash 的运行时错误. 1)忘记在 if , elif , else , for , ...

  4. 阿里云https证书Apache配置

    最近玩小程序,只支持https协议,于是给网站添加https支持.手上没钱,自己生成的证书不受信任,找到了阿里云的免费证书(PS:证书可以用在其他云主机上,不一定是阿里云的主机).如何购买下载不多说, ...

  5. 建议2:注意Javascript数据类型的特殊性---(2)慎用JavaScript类型自动转换

    在JavaScript中能够自动转换变量的数据类型,这种转换是一种隐性行为.在自动转换数据类型时,JavaScript一般遵循:如果某个类型的值被用于需要其它类型的值的环境中,JavaScript就自 ...

  6. webpack实践(四)- html-webpack-plugin

    webpack系列博客中代码均在github上:https://github.com/JEmbrace/webpack-practice <webpack实践(一)- 先入个门> < ...

  7. PHP中抽象类和接口的区别

    抽象类 抽象类无法被实例化,它的作用是为所有继承自它的类定义(或部分实现)接口. 使用 abstract 关键字定义抽象类. 可以像在普通类中那样在抽象类中创建方法和属性,在大多数情况下,一个抽象类至 ...

  8. HTTP_header安全选项(浅谈)

    HTTP报文头-安全问题 Mirror王宇阳 2019-10-01 参考:MDN技术文档:<http头安全相关的选项_by`myh0st> 认识HTTP协议 https://www.cnb ...

  9. iOS开发 - 超级签名实现之描述文件

    简介 因为最近企业签掉得太严重了,上头要求实现超级签进行游戏下载.故有了此文章,记录一下过程. 签名原理其实很简单,超级签名的技术就是使用个人开发者账号,将用户的设备当作开发设备进行应用分发.这也导致 ...

  10. DG中switchover切换操作

    问题描述:我们配置DG的目的就是为了在主库出现故障时,备库能够提供服务,保证业务的正常运行,switchover是用户有计划的进行停机切换,能够保证不丢失数据,我记录一下我进行switchover中的 ...