如何在价值中应用空间<input type="“number”"> ?

Question

I am trying to add space in <input type="number"> value in html.

But whenever i add space in value like this value="0401 889 889" than there is nothing appear in <input type="number"> .

Without adding a blank space

If i am not add blank space in <input type="number"> 's value than its works fine.

<input type="number" value="0401889889">

After adding a blank space in ``

<input type="number" value="0401 889 889">

What i exactly want

 <h2>Without adding a space in value</h2> <input type="number" value="0401889889"> <h2>With adding a space in value</h2> <input type="number" value="0401 889 889">

Answer 1

Instead, you can use this

 <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

Answer 2

Check this answer: https://stackoverflow.com/a/25121813/14050736

You'll have to modify the regex a bit according to the group of number you desire

Edit: I just noticed: Your input must be in "text" not "number"

Answer 3

If you want to prevent users from typing alphabetic characters you need to set an event listener for the "input" event that delete invalid characters from the value on-the-fly:

 const phone = document.getElementById('phone'); phone.addEventListener('input', (event) => { // delete any character that is not a digit or a space event.target.value = event.target.value.replace(/[^0-9^ ]/gi, ''); }); // or, if you have more than one input of type "tel" (eg mobile and landline) const phones = document.querySelectorAll('input[type=tel]'); phones.forEach(phone => phone.addEventListener('input', (event) => { event.target.value = event.target.value.replace(/[^0-9^ ]/gi, ''); }))

 <input type="tel" id="phone" name="phone" placeholder="0401 889 889" pattern="[0-9]{4} [0-9]{3} [0-9]{3}"> <input type="tel" id="mobile" name="mobile" placeholder="0401 998 998" pattern="[0-9]{4} [0-9]{3} [0-9]{3}">