Question

我正在尝试将焦点自动对准第一个单选按钮，以便用户可以使用页面加载时的选项卡和箭头键自动开始循环浏览答案。

我可以通过复选框完成此操作，但是它实际上不适用于相同的组件，但只能用于单选按钮。

以下是复选框的组成部分。

<template>
<div class="col-12 form-group">
    <h5 class="mb-4" v-html="question.text"></h5>
    <img class="col-sm-6" :src="question.image" v-if="question.image">
    <div v-for="(answer, index) in question.answers" :key="answer.value">
        <label :class="`${name}${index}`">
            <input autofocus="(index === 0) ? 'true' : 'false'" class="checkbox" type="checkbox" @keydown.enter="selectAnswer($event)" :value="answer.value" v-model="form.answers[question.id]" :disabled="limitReached && form.answers[question.id].indexOf(answer.value) === -1" @change="select">
            <span class="font-weight-light">{{ answer.text }}</span>
        </label>
    </div>
</div>
</template>

这是单选按钮组件。

<template>
<div class="col-12 form-group">
    <h5 class="mb-4" v-html="question.text"></h5>
    <img class="w-100" :src="question.image" v-if="question.image">
    <div class="mb-2" v-for="(answer, index) in question.answers" :key="answer.value">
        <label :class="[`${name}${index}`, 'mb-2']">
            <input :ref="`question_${index}`" class="radio" type="radio" @keydown.tab.prevent="nextAnswer(answer.value)" :value="answer.value" v-model="form.answers[question.id]" @change="select">
            <span class="font-weight-light">{{ answer.text }}</span>
        </label>
    </div>
</div>
</template>

在安装后，我选择第一个单选按钮。

    mounted() {
        this.$refs.question_0[0].click()
        this.$refs.question_0[0].focus()
    },

这很好，但是我无法通过其他单选按钮开始循环。当我点击选项卡时，光标将在地址栏上移动。如果我在所有其他选项卡索引中循环，则最终将开始在单选按钮中移动。如果我手动选择一个单选按钮，则可以正常使用Tab或箭头键在其他单选按钮之间循环。

Vue，自动对焦于单选按钮

0 个答案: