在 Vue 中按下斜杠时输入焦点

Question

我看到很多网站都可以通过按斜线键 (Shift + 7) 来聚焦搜索栏或类似内容。 MDN Web Docs 就是一个例子。我想为我的 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 这样的库，它添加了自定义指令。

在 Vue 中按下斜杠时输入焦点

Focus Input When Pressing Slash in Vue

html

dom-events

vue.js