Though field validation and data formatting are the biggest challenges of working with web browsers, HTML5 does some help in enforcing this for us.
Telephone input field can be created using type=”tel”:
This looks like every other input field, with the difference that it optimizes the keyboard. Certain platforms like tablets, or smartphones will pop-up only-numeric keyboard for this input field.
For example, here is the pattern for common USA phone format:
you can apply this format using the pattern attribute:
This page has some more examples for phone number patterns in different regions
tel input type is currently supported in all major modern browsers. The full numeric keypad makes a great user experience.