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

Question

家伙

我正在尝试执行以下功能：当用户按下Enter键时，它将自动聚焦到下一个输入区域。下面是我编写的代码（基本上，我将@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，您需要将nodelist转移到数组以进行循环吗？）将相同的代码像这样输入到每个输入中似乎不是最聪明的方法：）

Answer 1

此属性与nextSibling之间的区别在于，nextSibling返回下一个同级节点作为元素节点，文本节点或注释节点，而nextElementSibling返回下一个同级节点作为元素节点（忽略文本和注释节点）。

所以，请尝试使用next nextElementSibling而不是nextSibling。

Answer 2

问题出在您的选择器中。

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

这对您来说应该很完美：

@keyup.enter="$event.target.parentElement.nextSibling.children[1].focus()"
（考虑选择一个更好的选择器）