Question

我有一个在电话号码字段中添加破折号的函数，我如何将此字段中的字符限制为仅12个字符？

function dash(el, after) {
  after = after || 3;
  var v = el.value.replace(/[^\dA-Z]/g, ''),
    reg = new RegExp(".{" + after + "}", "g")
  el.value = v.replace(reg, function(a, b, c) {
    return a + '-';
  });
}

var el = document.getElementById('phone');
el.addEventListener('keyup', function() {
  if (el.value.length <= 8) {
    dash(this, 3);
  } else {
    el.value.length++;
  }
  if (el.value.length >= 12) {
    el.value.length = el.substring(0, 12);
  }
});

<span>Phone</span><input id="phone" class="comInputc" name="phone" type="text">

Answer 1

使用maxlength属性：

<span>Phone</span><input id="phone" class="comInputc" name="phone" type="text" maxlength="12">

Answer 2

让我们再进一步一步，使用内置了语义和正则表达式模式匹配验证的better tag。

尝试在下面以指定的格式输入数字和破折号以外的任何内容，然后单击“提交”按钮。

<form>
  <label for="phone">Enter your phone number:</label>

  <input type="tel" id="phone" name="phone"
         pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
         placeholder="ie. 123-456-7890"
         required>
  <div>
    <button>Submit</button>
  </div>
</form>

如何将字符串限制为仅12个字符

2 个答案: