在达到最大长度时跳转到下一个输入框？

Question

在达到最大长度时跳转到下一个输入框？

javascripthtmlvue.jsnuxt.jsvuelidate

3

我有一个Vue表单，其中为电话号码输入合并了一些输入框以进行样式设置。

我的问题是用户必须按Tab键才能进入电话号码的下一个输入框。

是否有一种方法可以检查当前输入框的最大长度，并在达到时进入下一个输入框？

<div class="combined-input combined-input--phone" :class="{'error--input': phoneInvalid('patientInformation')}">
  <div class="open-parenthesis"></div>

  <input type="text" id="phoneArea" maxlength="3" @blur="$v.formData.patientInformation.phone.$touch()" v-model.trim="$v.formData.patientInformation.phone.area.$model">

  <div class="close-parenthesis"></div>

  <input type="text" id="phoneA" maxlength="3" @blur="$v.formData.patientInformation.phone.$touch()" v-model.trim="$v.formData.patientInformation.phone.a.$model">

  <div class="dash"></div>

  <input type="text" id="phoneB" maxlength="4" @blur="$v.formData.patientInformation.phone.$touch()" v-model.trim="$v.formData.patientInformation.phone.b.$model">
</div>

- hendy0817

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kissu · Accepted Answer

相信这并不是推荐的用户体验方式，但以下是一个示例，展示了如何实现此功能：https://codesandbox.io/s/move-to-next-input-on-condition-103b5?file=/src/App.vue 有用的代码主要部分：

focusNextOncePopulated(event, max) {
  if (event.target.value.length === max) {
    const nextElement = this.$refs?.[`input-${Number(event.target.dataset.index) +1}`]
    if (nextElement) nextElement.focus()
  }
},

每次输入字符时，都会检查字段的长度是否达到了您在特定输入上设置的最大值。如果是，并且有一个类似的输入作为兄弟节点，则将焦点放在它上面。另外，添加几毫秒的debounce也很好，可以提高性能。

编辑：为了防止尝试在DOM中找到正确的下一个input而出现任何问题，我们在每个输入上设置了一些引用(在Vue中选取某些DOM元素的推荐方式)。然后，在达到max时，我们将当前输入的data-index 增加1，这使我们能够转到下一个输入。

附注： ?.语法是可选链接操作符，它可以避免糟糕的代码并在达到max时无需下一个input，从而避免错误。

附注：不确定是否有方法在事件@input期间直接获取元素的$refs，但如果有，我不知道如何做到。