Vue JS 3 项目中Chrome虚拟键盘事件异常问题求助

我之前帮朋友排查过类似的Chrome虚拟键盘适配问题，结合你在树莓派触摸屏+Chromium 88+Vue 3场景下的情况，给你几个可行的解决方向：

1. 切换监听input事件替代键盘事件 #

这个第三方虚拟键盘的事件模拟逻辑有问题，导致keydown/keypress/keyup的key值为空，但它其实会直接修改输入框的DOM内容。Vue的v-model本质上依赖input事件，你可以直接监听input事件来处理输入，绕开键盘事件的问题：

<template>
  <input 
    v-model="inputValue"
    @input="handleInputChange"
    type="text"
  />
</template>

<script setup>
import { ref } from 'vue';
const inputValue = ref('');

const handleInputChange = () => {
  // 这里直接处理输入内容即可，不需要依赖key值
  console.log('当前输入:', inputValue.value);
};
</script>

2. 尝试启用Chromium原生虚拟键盘支持 #

Chromium 88自带了系统级虚拟键盘的支持，可能比第三方插件更稳定。你可以在浏览器地址栏输入chrome://flags/#enable-virtual-keyboard，将这个选项设置为Enabled，重启浏览器后试试原生虚拟键盘，它的事件会符合标准，key值不会为空。

3. 手动修补异常键盘事件（临时救急方案） #

如果必须使用这个第三方插件，可以在全局层面监听键盘事件，当检测到key为空但输入框有内容变化时，手动补全key值，让Vue的输入绑定能正常识别：

// 在Vue应用挂载前添加这段代码
document.addEventListener('keydown', (e) => {
  // 只处理输入框的异常事件
  if (!e.key && e.target.tagName === 'INPUT') {
    // 获取输入框最后一个字符作为key值
    const lastChar = e.target.value.slice(-1);
    if (lastChar) {
      // 用Object.defineProperty修改只读的key属性
      Object.defineProperty(e, 'key', { value: lastChar });
    }
  }
}, true); // 使用捕获阶段监听，确保先于Vue的事件处理

这个方法属于hack手段，适合临时解决问题，长期来看还是推荐换用更兼容的键盘方案。

4. 换用树莓派系统自带的虚拟键盘 #

树莓派默认预装了Onboard触摸屏键盘，你可以在系统设置→“键盘和鼠标”→“触摸屏键盘”里启用它。这个是系统级的键盘，会触发标准的原生键盘事件，完全不会有key值为空的问题，适配Vue应用会更稳定。

关于“字符显示后立即消失”的原因 #

这个现象是因为第三方插件的事件逻辑冲突：它先模拟输入字符到输入框，随后触发的keyup事件因为key为空，导致Vue的输入绑定认为这是一次无效操作，从而回滚了输入内容。解决事件异常或者换用标准键盘方案就能解决这个问题。

内容的提问来源于stack exchange，提问作者SashoSTZ