是否可以使用 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.
解释一下我为什么要尝试实现这个：
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.
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.
而不是重写key-事件，你可以打电话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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
