The code below validates, when typing, a phone number pattern:

document.getElementById('phone').addEventListener('input', function (e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});


<input type="text" id="phone" placeholder="(555) 555-5555"/>

When replacing type="text" with type="number", the algorithm does not work correctly. My intention is to make the user's keyboard open with the option of just numbers while the above code works exactly as it is. How can I solve this?

The code below validates, when typing, a phone number pattern:

document.getElementById('phone').addEventListener('input', function (e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});


<input type="text" id="phone" placeholder="(555) 555-5555"/>

When replacing type="text" with type="number", the algorithm does not work correctly. My intention is to make the user's keyboard open with the option of just numbers while the above code works exactly as it is. How can I solve this?

• javascript

Share Improve this question Follow asked May 28, 2021 at 19:24 John SimonJohn Simon 15722 silver badges88 bronze badges 6

• Is the user on a mobile device (with a mobile keyboard) or is it a user on a puter? – theknightD2 Commented May 28, 2021 at 19:27
• You will need to have all digits entered sequentially without spaces or special character. – PM 77-1 Commented May 28, 2021 at 19:27
• 3 Better use <input type="tel">, or not? – Sven Eberth Commented May 28, 2021 at 19:28
• @PM77-1 were you answering my question? – theknightD2 Commented May 28, 2021 at 19:28
• Custom masks will not work on non-text type inputs. – Mr. Polywhirl Commented May 28, 2021 at 19:28

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

It's unsurprising that HTML type="number" doesn't work for a phone#.

You really have two separate problems:

1. You'd like to validate a phone# input field. A regex could be a good solution.

2. You'd also like to filter out invalid characters as the user fills out the input field.

There are many options; each with its own pros/cons.

For starters, you might consider using <input type="tel">

Here are several other ideas to consider:

• How to force Input field to enter numbers only using JavaScript ?
• JavaScript: HTML Form - Phone Number validation

Actually, there is no way to add a maks to number input with characters like () but you could add inputmode="numeric" this will force mobiles to open numbers keyboard

document.getElementById('phone').addEventListener('input', function (e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});

<input type="text" id="phone" placeholder="(555) 555-5555" inputmode="numeric" />

or you could use the pattern attribute and set it allow to allow digits only like this

document.getElementById('phone').addEventListener('input', function (e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});

<input type="text" id="phone" placeholder="(555) 555-5555" pattern="\d*" />