Как я могу ограничить строку только 12 символами

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

Давайте сделаем еще один шаг и используем лучший тег , который имеет встроенную семантику и проверку соответствия шаблону регулярного выражения.

Попробуйте ввести что-либо, кроме цифр и тире, в указанном форматениже, а затем нажмите кнопку Отправить.

<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>

Answer 2

Используйте атрибут maxlength:

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