Auto format US phone numbers in (xxx) xxx-xxxx format

autoFormatPhone.html

<template>
  <div class="slds-grid slds-wrap">
    <div class="slds-col slds-size_1-of-1 slds-large-size_6-of-12 slds-p-horizontal--small">
      <div class="slds-form-element slds-p-top_medium">
        <label class="slds-form-element__label">Phone number<abbr class="slds-required"
            title="required">*</abbr></label>
        <div class="slds-form-element__control">
          <span onkeypress={keyCheck} onchange={keyCheck}>
            <lightning-input-field data-req="required" data-address="phone" data-id="phone" field-name="Phone"
              variant="label-hidden"></lightning-input-field>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

autoFormatPhone.js

import { formatPhoneNumber } from "c/util";

export default class AutoFormatPhone extends LightningElement {
  
  keyCheck(event) {
    let number = event.target.value;
    this.template.querySelector(`[data-id="phone"]`).value = formatPhoneNumber(event, number);
  }           
}

util.js

export function formatPhoneNumber(event, number) {
  let keyCode = event.which;
  if ((keyCode < 48 || keyCode > 57)) {
      event.preventDefault();
      return number;
  } else if (number && number.length > 13) {
      event.preventDefault();
      return number;
  }
  return autoFormatNumber(number);
}

function autoFormatNumber(number) {
    number = number.replace(/[^\d]/g, '');
    if (number.length === 1) {
        number = number.replace(/(\d{1})/, "($1)");
    } else if (number.length === 2) {
        number = number.replace(/(\d{2})/, "($1)");
    } else if (number.length === 3) {
        number = number.replace(/(\d{3})/, "($1)");
    } else if (number.length === 4) {
        number = number.replace(/(\d{3})(\d{1})/, "($1) $2");
    } else if (number.length === 5) {
        number = number.replace(/(\d{3})(\d{2})/, "($1) $2");
    } else if (number.length === 6) {
        number = number.replace(/(\d{3})(\d{3})/, "($1) $2");
    } else if (number.length === 7) {
        number = number.replace(/(\d{3})(\d{3})(\d{1})/, "($1) $2-$3");
    } else if (number.length === 8) {
        number = number.replace(/(\d{3})(\d{3})(\d{2})/, "($1) $2-$3");
    } else if (number.length === 9) {
        number = number.replace(/(\d{3})(\d{3})(\d{3})/, "($1) $2-$3");
    } else if (number.length === 10) {
        number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
    }
    return number;
}