vue.js keyup.enter() 专注于下一个输入不起作用

Question

伙计们

我正在尝试做一个功能，当用户按下回车键时，它会自动聚焦到下一个输入区域。下面是我写的代码(基本上我把 @keyup.enter="$event.target.nextSibling.focus() 到每个 input 元素，我不能看看为什么它不起作用。

<form
        id="formContact"
        action
        method="post"
        autocomplete="on"
        autocapitalize="on"
        ref="contactForm"
      >
        <div class="formContact-item fn">
          <label for="fn">*family name:&nbsp;&nbsp;</label>
          <input
            type="text"
            name="fn"
            id="fn"
            placeholder="please enter your family name"
            v-model="contactForm.fn"
            @keyup.enter="$event.target.nextSibling.focus()"
          />
        </div>
        <div class="formContact-item gn">
          <label for="fn">*given name:&nbsp;&nbsp;</label>
          <input
            type="text"
            name="gn"
            id="gn"
            placeholder="please enter your given name"
            v-model="contactForm.gn"
            @keyup.enter="$event.target.nextSibling.focus()"
          />
        </div>
        <div class="formContact-item email">
          <label for="email">*email:&nbsp;&nbsp;</label>
          <input
            type="email"
            name="email"
            id="email"
            placeholder="please enter your email address"
            v-model="contactForm.email"
            @keyup.enter="$event.target.nextSibling.focus()"
          />
        </div>
        <div class="formContact-item phone">
          <label for="phone">*Tel:&nbsp;&nbsp;</label>
          <input
            type="tel"
            name="phone"
            id="phone"
            placeholder="please enter your phone number"
            v-model="contactForm.phone"
            @keyup.enter="$event.target.nextSibling.focus()"
          />
        </div>
        <div class="formContact-item msg">
          <label for="msg">*messgae:&nbsp;&nbsp;</label>
          <textarea
            name="msg"
            id="msg"
            cols="30"
            rows="10"
            placeholder="please leave your messgae here"
            v-model="contactForm.msg"
          ></textarea>
        </div>
        <div class="formContact-item submit">
          <input type="submit" name="submit" id="submit" value="submit" @click.prevent="postUser" />
        </div>
      </form>

此外，是否有一种简单的方法可以做到这一点，比如我是否可以通过一种简单的方式获取所有输入(也许可以使用 ref？但是对于所有输入？使用 javascript 查询选择器的另一个选项不符合目的使用 vue 并且您需要将节点列表传输到数组以执行循环？)像这样将相同的代码放入每个输入看起来不是最聪明的方法:)

Answer 1

问题出在您的选择器上。

如果您将记录 $event.target.nextSibling 结果将为 null，这是因为输入元素是 div 中的最后一个元素并且没有下一个 sibling 。您必须选择 parenElement 的 nextSibling 的 input 元素。

这应该非常适合您:

@keyup.enter="$event.target.parentElement.nextSibling.children[1].focus()"

(考虑选择更好的选择器)