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

【问题标题】：How to trigger a keyboard "keydown" event after clicking a button in JavaScript?单击JavaScript中的按钮后如何触发键盘“keydown”事件？
【发布时间】：2019-07-23 20:51:10
【问题描述】：

我想在 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>

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

【问题讨论】：

标签： javascript vue.js mouseevent keyboard-events dom-events

【解决方案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 })

【讨论】：