[英]How can I simulate a different button pressed when a button is pressed?
Is it possible using vue.js to simulate another button pressed when a button is pressed?是否可以使用 vue.js 模拟按下按钮时按下的另一个按钮?
For example, if I press the ↓ (Arrow down) button, I would like it to be represented as if I had pressed the TAB button.例如,如果我按下↓ (向下箭头)按钮,我希望它显示为我按下了TAB按钮。
Explanation why am I trying to implement this:解释为什么我要实现这个:
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).在这个列表中,我有一个
<input>
元素作为搜索框,用于搜索列表中的其他元素(所有其他元素都直接列在该搜索框下)。 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.
要转到下一个项目,您必须按TAB按钮。 But I need to achieve this with the ↓ (Arrow down) button.
但我需要使用↓ (向下箭头)按钮来实现这一点。
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.我认为您是在询问如何在用户按下DOWN时模拟TAB按键,目的是将焦点移动到下一个可聚焦输入。
Instead of rewriting the key
-event, you could call HTMLElement#focus()
on the next sibling:您可以在下一个兄弟节点上调用
HTMLElement#focus()
,而不是重写key
事件:
<!-- 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>
Sure, add a ref to tab
当然,添加一个引用到
tab
<div class="tab" ref="tab">
Then capture arrow click:然后捕获箭头单击:
arrowClick() {
this.$refs.tab.click()
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.