时间戳

首页 > 解决方案 > vue.js keyup.enter() 专注于下一个输入不起作用

vue.js - vue.js keyup.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 的目的并且您需要将节点列表传输到数组以执行循环？）像这样将相同的代码放入每个输入看起来不是最聪明的方法:)

标签： vue.jsinputkeyup

解决方案

问题出在您的选择器中。

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

这应该非常适合您：

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

（考虑选择更好的选择器）

推荐阅读