enter键的使用
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键的使用的更多相关文章
- 按Enter键后Form表单自动提交的问题
怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然 ...
- 按下enter键后表单自动提交问题
在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Aja ...
- WPF 让Enter键按下时默认为某按钮(Button)事件
在编写web程序时我们经常用到按Enter键来提交表单,在WPF中我们也常常需要这样的功能:例如在填写登录框信息时当填写完密码之后我希望直接按Enter键就能完成登录操作.这个需求如何来完成呢? 其实 ...
- javascript之小积累-.-添加form表单查询的enter键支持
/* * 列表查询的enter键支持 * author by 清风 */ function enterEvent() { document.onkeydown = function(even ...
- js防止回车(enter)键提交表单及javascript中event.keycode
如何防止回车(enter)键提交表单,其实很简单,就一句话.onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里 ...
- 关于android软键盘enter键的替换与事件监听
android软键盘事件监听enter键 软件盘的界面替换只有一个属性android:imeOptions,这个属性的可以取的值有 normal,actionUnspecified,actionNo ...
- JS实现登录页面记住密码和enter键登录
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>按 ...
- form表单按enter键自动提交的问题
废话不多说.直接上代码. 1:form表单按enter键自动提交的情况 <!doctype html> <html lang="en"> <head& ...
- 点击Enter键,文本框焦点改变 分类: WinForm 2014-04-15 10:30 223人阅读 评论(0) 收藏
一个例子: 一个简单的 登陆界面,有用户名.密码文本框.登陆按钮. 想要实现的效果是,用户输入用户名之后,点击Enter键进入到下一个文本框,同理,输入完密码之后,登陆按钮获得焦点,再次点击Ente ...
- jQuery实现按Enter键触发事件?
按Enter触发 $(function(){ document.onkeydown = function(e){ var ev = document.all ? window.event : e; ) ...
随机推荐
- 002_Java语言基础
------------恢复内容开始------------ 存储的基本单元:byte: 1 byte = 8 bit(位) 1 KB = 1024 byte 1 MB = 1024 KB 1 GB ...
- 2019 The Preliminary Contest for ICPC China Nanchang National Invitational(A 、H 、I 、K 、M)
A. PERFECT NUMBER PROBLEM 题目链接:https://nanti.jisuanke.com/t/38220 题意: 输出前五个完美数 分析: 签到.直接百度完美数输出即可 #i ...
- LeetCode刷题总结-栈、链表、堆和队列篇
本文介绍LeetCode上有关栈.链表.堆和队列相关的算法题的考点,推荐刷题20道.具体考点分类如下图: 一.栈 1.数学问题 题号:85. 最大矩形,难度困难 题号:224. 基本计算器,难度困难 ...
- 线程提供了一个方法:void join() ,join可以协调线程之间的同步运行。
package seday09; /** * @author xingsir * 线程提供了一个方法:void join() ,join可以协调线程之间的同步运行. * 此方法允许执行这个方法的线程在 ...
- CentOS7自动化安装PXE方案
目的 无人值守批量安装CentOS7 安装条件 一台带有PXE协议支持NIC的待安装主机 一台存放安装文件的服务器,如NFS,HTTP或FTP服务器 Kickstart 生成的配置文件(ks.cfg) ...
- iOS:bugly符号表上传
https://blog.csdn.net/weixin_38633659/article/details/81667721 这个篇文章已经讲得足够清楚 而且官方的文档也写得很好(注意官方网站上的文档 ...
- PuppeteerSharp读取页面完整HTML(.NetCore)
1.使用NUGET安装PuppeteerSharp 通过工具或者命令方式安装 2.初始化浏览器 await new BrowserFetcher().DownloadAsync(BrowserFetc ...
- dataguard ORA-12514: TNS:listener does not currently know of service requested in connect descriptor
错误的意思是listener 不知道连接解析器中的请求服务,这里要说静态监听和动态监听了动态注册是在instance启动的时候PMON进程根据init.ora中的instance_name,servi ...
- SVN清理失败(clean up)或者(lock)问题进入死循环最终解决方案
解决方法: step1: 到 sqlite官网 (http://www.sqlite.org/download.html) 下载 sqlite3.exe step2: 将下载到的 sqlite3.ex ...
- STM32的Keil找不到想要flash的解决方法
STM32的Keil找不到想要flash的解决方法:https://blog.csdn.net/qq_38376586/article/details/79582020