CodePen Embed - phone number validation

<input type='text' class='phone-number' maxLength='13'>

const $phoneNumber = document.querySelector('.phone-number');
function phoneNumberSlice(value, num) {
  const arr = [8, 4];
  arr.forEach((n) => {
    if (value.length >= n) {
      value = value.slice(0, n - 1) + '-' + value.slice(n - 1);
    }
  });
  return value;
}
function phoneNumberValidation({ target: { value }, inputType }) {
  if (inputType === 'insertFromPaste') {
    this.value = this.value.slice(0, 13);
  }
  this.value = this.value.replace(/[^0-9]/g, '');
  this.value = phoneNumberSlice(this.value);
  this.value = this.value.slice(0, 13);
}
$phoneNumber.addEventListener('input', phoneNumberValidation)

This Pen is owned by yoonminsang on CodePen.

See more by @yoonminsang on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.