vue绑定键盘事件 ctrl+enter触发事件

公司项目（vue+element）有个需求，是在一个input输入内容后按下Enter键进行搜索查询，查询到得数据显示在表格，勾选表格的选中的数据进行提交（提交按钮的快捷键是Ctrl+Enter键盘），功能很常见，下面说的主要是绑定这些键盘事件和遇到的一个问题

效果如图：

在输入框中绑定键盘事件vue官网提供了键盘修饰符很方便
代码如下：

// An highlighted block
<el-input  ref="enter" clearable @keyup.enter.native="listQuery(searchForm.fphm)" v-model="searchForm.fphm" placeholder="输入发票号码后四位,按Enter键搜索"></el-input>

在按钮上绑定键盘事件你会发现要先点击一下按钮，才能触发键盘事件，这样肯定是不满足我们需求的，所以就把事件绑定到了document上：

// A code block
<el-button type="primary"  @click="handleEntry(selection)">入账</el-button>

// An highlighted blockkeyCodeForEvent() {let self = thislet code = 0let code2 = 0document.onkeydown = function(e) {let evn = e || eventlet key = evn.keyCode || evn.which || evn.charCodeif (key === 17) {self.$refs.enter.blur() // 避免enter和ctrl+enter事件同时触发code = 1}if (key === 13) {code2 = 1}if (code === 1 && code2 === 1) {self.handleEntry(self.selection) // 这个方法就是按下ctrl+enter触发的方法code = 0code2 = 0}}},

在测试的过程中发现当把焦点聚焦到input框中，键盘按下ctrl+enter会同时触发我页面中的input框中的listQuery和handleEntry两个方法，为了解决这个问题就有了上面self.$refs.enter.blur()，按下ctrl键就让页面中input框失去焦点

在补充一个监听键盘事件：

// An highlighted block
document.addEventListener('keydown',function(e){if(e.keyCode=='13'){console.log('你按下了回车键!')}})

vue绑定键盘事件 ctrl+enter触发事件相关推荐

Cesium 事件详解（鼠标事件、相机事件、键盘事件、场景触发事件）
Cesium 事件详解(鼠标事件.相机事件.键盘事件.场景触发事件) 1 Cesium中的事件根据使用情况,我把Cesium中的事件大体分为三种,即屏幕空间事件处理程序,屏幕空间相机控制器,场景触发 ...
jq html 回车提交表单,jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部.键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,documen ...
vue中解决用户双击鼠标触发事件
1.可能在业务中会碰见这样的事情就是用户双击可以触发事件单击也可以触发事件问题是俩次要触发不同的事件其实双击和单击的却别就是双击是俩次时间间隔特别小的点击组成的这样我们可以通 ...
html 自动触发事件,js自动触发事件自定义事件
在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(), form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件 ...
jQuery事件3——trigger触发事件
作用:触发事件,可传参数为事件类型(包括自定义事件)和传递给事件处理程序的额外数组参数 [例1]传事件类型 <!DOCTYPE html> <html lang="en&q ...
vue绑定键盘事件无效问题，vue绑定键盘delete事件示例，组合键绑定
项目有个需求,点击某个组件,按delete健后删除,于是乎第一就是想到了键盘事件 @keyup.delete='deleteKeyup(e)' 可是按delete键试了半天都没反应,加了.native ...
input绑定手机虚拟键盘的回车按钮触发事件
$("#keyword").on('keypress', function(e) { //#keyword为input文本框var keycode = e.keyCode;var ...
给键盘上的enter设置事件_Selenium3 + Python3自动化测试系列——鼠标事件和键盘事件...
欢迎各位小哥哥小姐姐阅读本的文章,对大家学习有帮助,请点赞加关注哦!!!!!!!!!! 您的点赞和关注将是我持续更新的动力呢.^v^ 有不懂的问题可以私聊我哦! 一.鼠标事件在 WebDriver ...
vue点击元素自身之外触发事件指令
1注册指令 Vue.directive('clickoutside', {bind(el, binding) {function handler(e) {if (el.contains(e.targe ...

vue绑定键盘事件 ctrl+enter触发事件

vue绑定键盘事件 ctrl+enter触发事件相关推荐

最新文章

热门文章