单击JavaScript中的按钮后，如何触发键盘“键盘按下”事件？

Question

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

我试图对向上和向下箭头键使用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>

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

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 })