表格中的手机字段

Question

我想像下面给出的图像那样在我的表单中构建手机字段。

方括号中包含三位数，下半部也包含三位数，末节包含四位数。我该如何做到这一点。

Answer 1

要自己执行此操作，您需要使用上图所示的模式预先填充字段，并对keypress事件做出反应，并进行相应调整。

如果当前位置的字符是“ _”，则允许输入数字，否则将光标向前移动一个位置。

下面是一个快速而肮脏的示例。显然，在删除字符和单击现有电话号码时需要格外小心，但是作为示例，这应该可以帮助您。

magicInput.value = magicInput.placeholder;
magicInput.addEventListener("keypress", key);
magicInput.addEventListener("focus", focus);
magicInput.addEventListener("mouseup", focus);
magicInput.addEventListener("input", focus);

function key(e) {
  if(!e.key.match(/\d/) || this.value.length > this.placeholder.length) {
    e.preventDefault();
  }
}

function focus(e) {
  let i = 0;
  
  for(i = 0; i < this.value.length; i++) {
    if(this.value[i] === "_") {
      break;
    }
  }
  
  this.setSelectionRange(i, i + 1);
}

input {
  font-size: 1.5rem;
  padding: 0.5rem;
}

<input id="magicInput" type="text" name="mobile" placeholder="(___) - ___ - ____" autofocus />