How To Auto-format Telephone Numbers In An Html Text Input Type Field Using Javascript?

I need a solution for the following 3-part challenge I am facing. On a web page form,I have an input type = “text” field where it requires the user to input a 10 digit only tel

Solution 1:

There is actually an input type of tel, which will save you a lot of hassle. Using <input type="tel" ... would be the correct approach, and it also allows you to specify a regex to validate the phone number to your specification, using the pattern attribute.

For example

<inputtype="tel" >

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel

It is worth noting, that you will still need server-side validation, of course. You should use the same regex on both client, and server.

This is widely supported now, but if your worried, see this answer

Solution 2:

First, I would advise against removing characters immediately, as it can be counter-intuitive for the user: you don't want them to think their keyboard is broke.

Secondly, some of your requirements are contradictory. Two examples:

the input must still append a zero to the beginning of that phone number to make it 10 digits in total

[...]

All of the above conditions must validate and correct user data immediately, as and when the user inputs the data

This would mean that if the user starts typing in the empty input field, and types a "1", the rule should kick in immediately and make that phone number 10 digits in total.

Another contradiction:

Allow the input of numbers only. [...] invalid characters will be ignored/stripped

[...]

Strip international dialing codes from phone numbers, [...] +27123456789 should become 0123456789

But if the user can only type digits, then they would never be able to enter +27: already when they type the "+", it would be stripped.

This can of course not be the intended behaviour. So at least some rules should only be applied when the user somehow indicates they have finished entering the phone number. This can be done when they move the selection to a next input field.

Here is an implementation where characters other than digits and "+" are ignored/stripped immediately, and a "+" can only be entered as the left-most character.

The removal of the international dial code, and the padding with zero, will only be applied when the focus changes:

const el = document.querySelector("#PhoneNumber");

constlittleClean = input => input.replace(/(\d)\D+|^[^\d+]/g, "$1")
                                  .slice(0, 12);
constbigClean = input => !input ? ""
                                 : input.replace(/^\+(27)?/, "")
                                        .padStart(10, "0")
                                        .slice(0, 10);
constformat = clean => {
    const [i, j] = [el.selectionStart, el.selectionEnd].map(i =>clean(el.value.slice(0, i)).length
    );
    el.value = clean(el.value);
    el.setSelectionRange(i, j);
};
el.addEventListener("input", () =>format(littleClean));
el.addEventListener("focus", () =>format(bigClean));
el.addEventListener("blur", () =>format(bigClean));

<form><label>Phone Number<br><inputid="PhoneNumber"type="tel"minlength="10"required></label><br><label>Name<br><inputid="Name"type="text"required></label><br></form>