按下按钮时如何模拟按下的不同按钮? [英] 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.
单击下拉列表后，将打开包含所有元素的列表.在这个列表中，我有一个 元素作为搜索框，用于搜索列表中的其他元素(所有其他元素都直接列在该搜索框下).当前，当下拉列表打开时，焦点会自动设置到搜索框.要转到下一个项目，您必须按 TAB 按钮.但我需要使用 ↓(向下箭头)按钮来实现这一点.
Explanation why am I trying to implement this:
推荐答案
我认为您在问如何在用户按下 时模拟 TAB 按键DOWN 目标是将焦点移到下一个可聚焦的输入.
您可以调用 key 事件rel="nofollow noreferrer">HTMLElement#focus() 在下一个兄弟:
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.
Instead of rewriting the key-event, you could call HTMLElement#focus() on the next sibling:
<脚本>新的 Vue({el: '#app',方法: {下一个输入(e){const next = e.currentTarget.nextElementSibling;如果(下一个){下一个焦点()；}},上一个输入(e){const prev = e.currentTarget.previousElementSibling;如果(上一个){上一个焦点()；}},}})</script>
<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屋！
