Question

所以我有以下输入：

<input type='text' placeholder='Phone number'>

简单可以。我想要的是，无论何时关注该特定框，预先显示的模式将显示以帮助用户该框接受数据的确切程度。我希望它显示的方式是这样的：

（__）____-____

因此，当用户键入任意7个初始数字时，它将显示如下：

（21）3322-1 ___

无需用户输入“（”，“）”或“ - ”，因为当用户输入数字时，该位置已经在正确的位置。

在方框接受了10位数字（开头两位，然后是四位数）后，输入框将停止接收任何类型的数据（可以使用maxlength = '10'完成，所以不是问题）。如果框中没有数据，它将返回显示html文件的常规占位符：

电话号码

如果有人教我怎么做，我会很高兴的。提前感谢愿意提供帮助的任何人。

Answer 1

如果达到最大输入长度，如何将输入分组并聚焦下一个？

let container = document.querySelector('.phone-input');

container.addEventListener('input', event => {
  let input = event.target;
  if (input.value.length >= input.attributes['maxlength'].value) {
    while ((input = input.nextElementSibling) !== null) {
      if (input.tagName === 'INPUT') {
        input.focus();
        break;
      }
    }
  }
});

<div class="phone-input">
 (<input type="text" maxlength="2" size="2">)
  <input type="text" maxlength="4" size="4"> -
  <input type="text" maxlength="4" size="4">
</div>

基于此问题的答案实施：Focus next input once reaching maxlength value

如何在输入数据时更改“文本”类型的输入？

1 个答案: