How do i add a space to a phone number in a html form? Options

[dariank]

When the input is 1234567890 it outputs 1234 567 890

Thanks!

[pandy]

You mean the user types it without spaces and you get it with spaces? Can't be done with HTML. You need some kind of programming.

[dariank]

Ok how do I go about doing that? Can you add some reference code?

[Christian J]

When the input is 1234567890 it outputs 1234 567 890

You mean after the form is submitted (the easiest to do), or on the fly while the user is typing (harder)?

You can also "force" the user to type it right from the start, using e.g. the INPUT element's PATTERN attribute. Here are some examples: https://www.html5pattern.com/Phones --however in theory a user could circumvent such form requirements, anything important needs to be done with a server-side script.

[pandy]

Yeah, I forgot about pattern. That's probably the best option. So it can after all be done with HTML. Sorry.

[Christian J]

But note that PATTERN is just client-side form validation, taking effect after the user tries to submit the form, and as such doesn't really help the user. In fact, being forced to enter the phone number in a certain format might be regarded as unnecessary and annoying. Perhaps spaces will help users spot typos, but nothing prevents users from adding such spaces themselves if they feel the need.

OTOH, if the site owner wants a certain format on the submitted phone number, I think it's more reliable to reformat it with the server-side script. That way the users don't have to be involved with it at all.

[coothead]

Hi there dariank,

as pointed out, this is best done server side but you
could, for fun purposes, use a modicum of JavaScript.

CSS

CODE

input[type="tel"]{
   background-color: #9f9
}
input[type="tel"]:invalid {
  background-color: #f99
}

HTML

CODE

  <form action="#">
   <label>telephone number:
     <input type="tel" name="phone"
       pattern="[0-9]{5}\s+[0-9]{3}\s+[0-9]{3}"
       placeholder="eg: 01234 567 890"
       required
       >
   </label>
  <button>submit</button>
</form>

JavaSript

CODE

(function( d ) {

  var inp = d.querySelector( 'input[type="tel"]' )
      inp.addEventListener( 'keyup',
  function(){
   if ( inp.value.length == 5 ||
        inp.value.length == 9 )  {
        inp.value = inp.value +  ' ';
    }
  }, false);
}( document ));

coothead

[Brian Chandler]

Please also notice that except in *extremely* limited cases, trying to force a phone number input like this is antisocial, and totally stupid. For example, if you are an American in America, and you only permit other Americans in America to access your website, then go ahead and enforce the American phone number format. But in all other cases you will just be causing pain for people who live in different countries than the one you are familiar with.

[coothead]

Hi there Estherkincaid,

to the best of my knowledge, I do not believe
that the HTML input elements can be styled
with the "before" or "after" content properties.

Even if it was possible, "after" does mean after
and definitely not between.

coothead

This post has been edited by coothead: Feb 7 2023, 09:38 AM

[Christian J]

Please also notice that except in *extremely* limited cases, trying to force a phone number input like this is antisocial, and totally stupid. For example, if you are an American in America, and you only permit other Americans in America to access your website, then go ahead and enforce the American phone number format. But in all other cases you will just be causing pain for people who live in different countries than the one you are familiar with.

Not only that, there may also be individual user preferences within a country (regardless of any official format rules). For example, a number like 112233 might be best formatted as "11 22 33", while a number like 111222 might look better as "111 222".

Despite this I thought it was an interesting programming exercise, but ran into problems rightaway. First, the user may get stuck if trying to make corrections with the Backspace key, and the script keeps reinserting a space character as soon as the user erased it. Second, what if the user prefers to use hypens instead of spaces, and the script insists on deleting them and insert spaces instead? While none of these issues are catastrophic, they could be potentially annoying, and as such perhaps even cause the user to make typos...

IMO, mandatory client-side formatting like should only exist to help the user, but how helpful is it if you try to force the user to use a formatting he's unused to?

[pandy]

Yes. And cell phone numbers can be longer that land line numbers. Here land line number have a three digit county number followed by a 6 digit number. Cell phone numbers were the same to start with, 9 digits. Now they can have totally 10 digits. But many people, including myself, prefer to put the spaces so 4 numbers end up in the beginning group, 0123 12 34 56, makes it easier to remember. When the number is spaced out differently it takes some extra checking to make sure it's correct.

The address book in my phone breaks numbers up in a way I don't like. Annoying.

[Christian J]

Yes. And cell phone numbers can be longer that land line numbers. Here land line number have a three digit county number followed by a 6 digit number.

My old phone dictionary used the format "11 22 33" for local numbers. My current phone's address book displays the same number as "112-233", sometimes with hyphens, sometimes not.

There are (were) also the 5 digit automatic response numbers, like 90 510 (speaking clock) or 90 000 (former emergency number), not that you're likely to enter them in a form.

many people, including myself, prefer to put the spaces so 4 numbers end up in the beginning group, 0123 12 34 56, makes it easier to remember. When the number is spaced out differently it takes some extra checking to make sure it's correct.

The address book in my phone breaks numbers up in a way I don't like. Annoying.

Indeed, can't remember if it was a problem with my older mobile phones though.

[pandy]

Hi there Estherkincaid,

to the best of my knowledge, I do not believe
that the HTML input elements can be styled
with the "before" or "after" content properties.

Even if it was possible, "after" does mean after
and definitely not between.

coothead

Estherkincaid turned out to be a spammer so her posts were removed.

[coothead]

. Estherkincaid turned out to be a spammer so her posts were removed.

Oh my gosh, I sincerely hope that this does not mean that I
have received an infraction for fraternising with the enemy.

coothead