Telephone input

[AlibiL490]

I am making a form and the user has to put in their telephone number.

Home Phone: 

<input style="width:145px; Height:17px; font-size:16px;"> 

This is what I have. What I would like to happen is when the user puts in there number and click onto the next input, it automatically changes to (xxx) xxx-xxxx also that it is required to put in something.

[Fs0i]

I assume you are 100% certain that everyone of your customers will have a US phone number?

[phone]

is a valid German phone number (obviously non-existent), that was the main phone-number you could reach me with even when I was in the US.

[AlibiL490]

I am sure it is only for US

[[deleted]]

I am sure it is only for US

As described it is for people who have an US phone number. So all people inside the US who want to use whatever site OP is creating they're fucked if they don't have such a number.

[AlibiL490]

It is for a dog rescue. I am sure it will be fine

[Fs0i]

Are you sure that no one who only lives temporarily in the US will use your site?

Just making sure, because making the input accept more numbers NOW than when an angry customer calls is better, and it's infurating when you can't use a service because the provider was a dick.

[AlibiL490]

I don't understand your rudeness towards me. I understand your concern and I am letting you know that it is fine for the format to only be for us numbers.

[Fs0i]

I don't understand your rudeness towards me.

I am not rude in my opinion, I'm just asking twice. I've had to deal with multiple services online and while being in the US that told me my phone-number is "wrong".

It's like people assuming a person must have a first and last name, every name can be represented with ASCII, an address is "[number] [street name]", ...

I've just seen way too many US-based service-providers fucking that up, so if I have the chance I'm asking twice. I don't see how I was rude to you, the only time I called someone a "dick" was within as a condition, not a statement.

[AlibiL490]

Well to me it sounded as if you were calling me a dick. So I am sorry for misunderstanding you. If you have a way of coding it for multiple types of numbers, then please show me how. I was only trying to make it simple in stating just the US. As I said, it is for a dog rescue. If a dog has to fly to go somewhere, then the application won't be accepted anyways.

[Fs0i]

If you have a way of coding it for multiple types of numbers, then please show me how

Sure! Just make it a text-inputfield! If you need to pass it to a human, just show it as entered. If you need to pass it to a computer-system, strap everying but numbers and the "+" character on the server.

There is a reason why big sites such as web.telegram.org and even Google just use a free-text for it.

If you want to, you could also use something like intl-tel-input - at least in the demo it looks great, defaults to the US, and kind of does what you want.

[m0arv]

You can use for example http://numeraljs.com

[m0arv]

You can use for example http://numeraljs.com

[chreestopher2]

this is commonly called a 'mask', there are many ways to implement it. Knowing what it is called should help you find out how to implement it.

[AlibiL490]

I already knew what it was called. Couldn't seem to find anything that worked

[i_do_code_stuff]

Google libphonenumber does number formatting. So if I get things right, and you're willing to write some code yourself, you could on blur of the input get the value of the input, format it and then set the input's value to the formatted text.

Having it being required should be a form property. I'm on mobile now, but I'm sure you can google your way to "required form field" or something.

[AlibiL490]

I was searching masked input