Vue中绑定的keyup键盘事件属性无法生效怎么解决

• 原生<span>属于非交互内联元素，默认无法获取焦点。键盘事件（keyup/keydown/keypress）的触发前提是绑定事件的DOM节点当前处于激活聚焦状态，元素没拿到焦点时，所有绑定的键盘事件都不会被触发。
• 点击事件不依赖元素聚焦状态，所以@click绑定的方法能正常执行。

根据实际交互需求选对应方案即可：

方案1：仅聚焦到该元素时响应键盘事件 #

给span添加tabindex="0"属性，让它支持通过Tab键/点击获取焦点，就能正常响应绑定的键盘事件：

<span
  v-show="show"
  tabindex="0"
  @click.prevent="backTo"
  @keyup.enter.prevent="backTo"
  @keyup.space.prevent="backTo"
>
  返回上一页
</span>

注意：键盘事件上也加.prevent修饰符，避免按空格时触发页面滚动的默认行为。
如果是做可点击的操作按钮，更推荐直接用语义化的<button>标签替换span，button天生支持焦点、键盘回车/空格触发点击，无障碍兼容性更好，不需要额外加tabindex。

方案2：页面内全局响应回车/空格触发返回 #

如果不需要用户先聚焦到元素，只要在当前页面按回车、空格就触发返回逻辑，不要把键盘事件绑在span上，直接在组件生命周期里绑定全局键盘事件，组件销毁时移除事件避免内存泄漏：

export default {
  methods: {
    backTo() {
      // 原有返回上一页逻辑
      this.$router.back()
    },
    handleGlobalKeyup(e) {
      // 匹配回车、空格键
      if (e.key === 'Enter' || e.code === 'Space') {
        this.backTo()
      }
    }
  },
  mounted() {
    window.addEventListener('keyup', this.handleGlobalKeyup)
  },
  beforeUnmount() {
    window.removeEventListener('keyup', this.handleGlobalKeyup)
  }
}

如果是组合式API写法，对应逻辑写在onMounted和onBeforeUnmount生命周期里即可。

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