vue键盘事件
2020-04-08 本文已影响0人
Jabo
背景
键盘事件在前端的应该还是很普遍的，尤其在有多个搜索条件的时候。
键盘值表
| code | 按键 |
|---|---|
| 48到57 | 0到9 |
| 65到90 | a到z（A到Z） |
| 112到135 | F1到F24 |
| 8 | BackSpace（退格） |
| 9 | Tab |
| 13 | Enter（回车） |
| 20 | Caps_Lock（大写锁定） |
| 32 | Space（空格键） |
| 37 | Left（左箭头） |
| 38 | Up（上箭头） |
| 39 | Right（右箭头） |
| 40 | Down（下箭头） |
Vue 按键别名
| 别名 | 按键 |
|---|---|
| .delete | delete（删除）/BackSpace（退格） |
| .tab | Tab |
| .enter | Enter（回车） |
| .esc | Esc（退出） |
| .space | Space（空格键） |
| .left | Left（左箭头） |
| .up | Up（上箭头） |
| .right | Right（右箭头） |
| .down | Down（下箭头） |
| .ctrl | Ctrl |
| .alt | Alt |
| .shift | Shift |
| .meta | (window系统下是window键，mac下是command键) |
键盘事件顺序
keydown → keypress → keyup
js原生事件
// 方式1
document.onkeydown = event => {
let e = event || window.event || arguments.callee.caller.arguments[0];
console.log(e)
};
// 方式2
document.addEventListener("keyup", e => { console.log(e) })
Vue键盘事件
// 回车事件
<input @keyup.enter="submit">
<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>
细心的小伙伴应该发现了最后一个加了一个native修饰符。这个是因为element ui 默认封装了input事件，我们需要通过修饰符告诉它，我们要用原生input事件哈
总结
喜欢您就收藏分享或来搞哈！
