如何在按下按钮时模拟按下的其他按钮？ [英] How can I simulate a different button pressed when a button is pressed?

问题描述

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

Is it possible using vue.js to simulate another button pressed when a button is pressed?

例如，如果我按↓ （向下箭头）按钮，我希望它被表示为好像按下了 TAB 按钮。

For example, if I press the ↓ (Arrow down) button, I would like it to be represented as if I had pressed the TAB button.

说明为什么我要尝试实现这个：

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

After clicking on a DropDown list, the list with all the elements opens up. In this list I have an <input> element as a search box, which is used to search other elements in the list (all the other elements are directly listed under that search box). Currently as the DropDown list opens the focus is set automatically to the search box. To go down to the next item, you have to press the TAB button. But I need to achieve this with the ↓ (Arrow down) button.

推荐答案

我<当用户按下 DOWN ，目标是将焦点移动到下一个可聚焦输入时，你会想到如何模拟 TAB 按键。

I think you're asking how to simulate a TAB keypress when the user presses DOWN with the goal of moving the focus to the next focusable input.

您可以调用键 -event下一个兄弟的.org / zh-CN / docs / Web / API / HTMLElement / focusrel =nofollow noreferrer> HTMLElement＃focus（） ：

Instead of rewriting the key-event, you could call HTMLElement#focus() on the next sibling:

<!-- 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/vue@2.5.17"></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>

这篇关于如何在按下按钮时模拟按下的其他按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！