title: How to auto-format telephone numbers in an HTML text input type field using JavaScript?
body: <p>I need a solution for the following 3-part challenge I am facing.</p>
  
  <p>On a web page form,I have an input type = “text” field where it requires the user to input a 10 digit only telephone number. I need the field to be able to do the following as and when the user inputs the data (either enters the data manually via typing from the keyboard or, copying and pasting data):</p>
  
  <p>Allow the input of 10 numbers only.  Example: when the user inputs a phone number, and accidentally inserts a letter, a symbol character or the space key in the text field, these invalid characters will be ignored/stripped. Example: User inputs q01234 56789p, only 0123456789 should be taken into the field.</p>
  
  <p>If 27 is detected at the beginning of the telephone number, it must convert it to a 0 but, must still be able to capture the last digit.  This is mainly for when the user pastes the data containing a 27 at the beginning, it must capture the entire number following the 27 as well and not omit the last digit, as phone numbers beginning with 27 will make the phone number 11 digits in total, therefore exceeding the 10 digit limit by 1 digit. (Example: 27123456789 must become 0123456789 and not just 012345678).  Is there a way this can be done as the user pastes the data into the field instead of waiting for the user to loose focus on the field first or can this be done even if the user looses focus on the field?  I ask as I am concerned about the limit not inserting the final digit from a copied value containing 11 digit due to it starting with a 27.</p>
  
  <p>All of the above conditions must validate and correct user data, as the user attempts to go onto the next input field by either pressing enter, tab or clicking on the next input field.</p>
  
  <p>The intended use of this form is for the user who will either be entering data on the fly or copying and pasting data from various, external logs that have either omitted the leading zero or included the +27 international dialing code.</p>
  
  <p>I intend for this form to be used mainly on Firefox (66x Quantum versions).</p>
  
  <p>by all means, if my html conflicts or is not compatible with the necessary JS code to pull this off, I don’t mind changing it, as long as it remains a text box and does not need to be changed into a “text field” or a “number” input type.</p>
  
  <pre><code>&lt;form&gt;
  &lt;label&gt;Phone Number&lt;/label&gt;&lt;br&gt;
  &lt;input id="PhoneNumber" type="text" minlength="10" maxlength="10" pattern="[0][0-9]" required&gt;
  &lt;/form&gt;
  </code></pre>