uni-app 开发中，监听 input 键盘事件获取不到按下按键值怎么办？

uniapp 开发 H5 时，无法监听按钮键盘事件的原因以及解决方法。

问题描述：

不少 uni-app 开发者在使用 input 组件时，监听 keyup 事件时，获取不到键盘的 keyCode。编写的代码如下：

<template>
  <input @keyup="handleKeyUp">
</template>

但是在 handleKeyUp() 方法里获取不到键盘的编码，出现这个问题的原因是 uni-app 的内置组件 <input> 其实是封装过的，编译为 h5 时不是 html 原生的 input 元素，所以才无法监听原生的键盘事件。

解决方法：

原理和 Vue 的组件事件监听是一样的，只需要在监听事件的指令上加上 .native 指令，就可以监听原生的键盘事件了，修改后的代码如下：

<template>
  <input @keyup.native="handleKeyUp">
</template>

这时就拿到键盘 code 值了。

附 keyCode 码值对照表

keyCode	实际键值
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（下箭头）

keyCode 码值对照表

需要注意的是，上面这种情况是使用 uni-app 开发应用，编译到 H5 的情况，不一定适用于小程序和 APP 开发。

原文：https://www.uniappbug.com/p29