按下按钮时，如何模拟按下的另一个按钮？

初中

是否可以使用vue.js模拟按下某个按钮时按下的另一个按钮？

例如，如果我按下↓（向下箭头）按钮，则希望像按下TAB按钮一样显示它。

解释为什么我要实现这一点：

单击下拉列表后，将打开包含所有元素的列表。在此列表中，我有一个<input>元素作为搜索框，用于搜索列表中的其他元素（所有其他元素都直接在该搜索框下列出）。当前，在“下拉列表”打开时，焦点自动设置为搜索框。要下一个项目，您必须按TAB按钮。但是我需要使用↓（向下箭头）按钮来实现。

东尼19

我想您是在问TAB用户按下时如何模拟按键DOWN，目的是将焦点移到下一个可聚焦的输入。

除了重写key-event之外，您还可以调用HTMLElement#focus()下一个同级对象：

<!-- TEMPLATE -->
<input type="text"
    @keydown.up.stop.prevent="prevInput"
    @keydown.down.stop.prevent="nextInput"
    v-for="i in 5">

// SCRIPT
methods: {
  nextInput(e) {
    const next = e.currentTarget.nextElementSibling;
    if (next) {
      next.focus();
    }
  },
  prevInput(e) {
    const prev = e.currentTarget.previousElementSibling;
    if (prev) {
      prev.focus();
    }
  },
}

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <input type="text"
         @keydown.up.stop.prevent="prevInput"
         @keydown.down.stop.prevent="nextInput"
         v-for="i in 5">
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    nextInput(e) {
      const next = e.currentTarget.nextElementSibling;
      if (next) {
        next.focus();
      }
    },
    prevInput(e) {
      const prev = e.currentTarget.previousElementSibling;
      if (prev) {
        prev.focus();
      }
    },
  }
})
</script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。