javascript - 单击JavaScript中的按钮后如何触发键盘“keydown”事件？

Question

单击 Vue.js 项目中的按钮后，我想触发键盘事件（keydown 向上/向下箭头）。

我尝试使用dispatchEvent(new KeyboardEvent("keydown", { keyCode: 38/40 }))向上和向下箭头键。

<template>
...
<div class="position-relative input-field__wrapper">
    <input
        class="input-field__input"
        ref="numberInput"
        type="number"
        :name="name"
        :id="randomId || id"
        :value="value"
        :min="min"
        :max="max"
        :step="step"
        :disabled="disabled"
        :aria-disabled="toString(disabled)"
        @input="$emit('input', e)"
        @change="$emit('change', e)"
    />
    <button
        aria-label="increment"
        class="increment position-absolute h-50"
        :disabled="incrementDisabled"
        :aria-disabled="toString(incrementDisabled)"
        @click="increment"
    ></button>
    <button
        aria-label="decrement"
        class="decrement position-absolute h-50"
        :disabled="decrementDisabled"
        :aria-disabled="toString(decrementDisabled)"
        @click="decrement"
    ></button>
</div>
...
</template>

<script>
...
methods: {
    increment() {
        this.$el
            .getElementsByClassName("increment")[0]
            .dispatchEvent(new KeyboardEvent("keydown", { keyCode: 38 }));
    },
    decrement() {
        this.$el
            .getElementsByClassName("decrement")[0]
            .dispatchEvent(new KeyboardEvent("keydown", { keyCode: 40 }));
    },
}
...
</script>

我只是不想添加这么多方法，只想让我的按钮在数字输入时像键盘一样上下。

标签： javascriptvue.jsmouseeventkeyboard-eventsdom-events

Answer 1

看起来您的父组件正在处理 keyup 和 keydown 事件。这是你如何做到的。

<template>
...
<div class="position-relative input-field__wrapper">
    <input
        class="input-field__input"
        ref="numberInput"
        type="number"
        :name="name"
        :id="randomId || id"
        :value="value"
        :min="min"
        :max="max"
        :step="step"
        :disabled="disabled"
        :aria-disabled="toString(disabled)"
        @input="$emit('input', e)"
        @change="$emit('change', e)"
    />
    <button
        aria-label="increment"
        class="increment position-absolute h-50"
        :disabled="incrementDisabled"
        :aria-disabled="toString(incrementDisabled)"
        @click="$emit('keydown', { keyCode: 38 })"
    ></button>
    <button
        aria-label="decrement"
        class="decrement position-absolute h-50"
        :disabled="decrementDisabled"
        :aria-disabled="toString(decrementDisabled)"
        @click="$emit('keydown', { keyCode: 40 })"
    ></button>
</div>
...
</template>

如果您想要带有关键代码的原始事件，您可以执行类似的操作

@click=e => $emit('keydown', { ...e, keyCode: 38 })