在Vue中按斜杠时获得焦点输入

Question

我见过许多网站，其中可以通过按斜杠 (Shift + 7) 来聚焦搜索栏或类似内容。一个例子是 MDN Web 文档。我想为我的 Vue 应用程序实现这个。 Vue 文档提到了最常用键的键修饰符，例如 .enter 或 .tab，但没有 Slash 的修饰符。此外，由于用户应该能够在页面上的任何位置触发事件，因此事件侦听器不能应用于输入元素本身。但是，我不知道如何将其应用到整个网站，因为 Vue 应用程序通常会注入到主体内的 div 或类似元素中。

Answer 1

对于像这样的边缘情况，可以使用常规的 javascript 事件侦听器。

您可以使用 Vue 生命周期方法来添加和删除侦听器。
这是一个工作示例：

Vue.createApp({

  mounted() {
    window.addEventListener("keypress", this.onKeyPress);
  },

  beforeDestroy() {
    window.removeEventListener("keypress", this.onKeyPress);
  },

  methods: {
    onKeyPress(event) {
      if (event.key !== "/") {
        return;
      }

      if (document.activeElement === this.$refs.searchInput) {
        return;
      }

      event.preventDefault();
      this.$refs.searchInput.focus();
    }
  }
}).mount('#app')

input {
  padding: 0.75em 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.min.js" integrity="sha512-C/bodwN49fOc1z+jln+2l9FlJ+lZ8HifB30oLE87zMQwsfoWv6Ed25b/x646tlcKb7515VJrJK8uo1oIH1UR2Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="app">
  <input type="search" ref="searchInput" placeholder="Press / to search" />
</div>

另一个解决方案可能是像 v-hotkey 这样的库，它添加了自定义指令。