how I can design area based phone textbox in html

Question

I want to make phone based textbox in my html-page. someone have idea how I can do this. Thanks

Answer 1

Depending on how complicated you want to get, you could use a simple background for the input box with the () and - inserted (albeit much smaller in order to fit).

A more complicated approach would be to have 3 textboxes, for each part of the number. Then put the () and - between the boxes. This may frustrate users though, as they will have to tab or click between the boxes.

You could modify the above method to include some javascript, which automatically changes focus from one textbox to another after the user finishes typing. This may work better, but will cause problems if the user ever tries to go back and edit their number.

Another way you could do this is to insert the () and - automatically with javascript after the number is changed. This may work better than the above method, but will still cause some issues with editing. It may also look strange before the numbers are added in.

It is worth noting that there is no real international standard for phone numbers. You might get into trouble if someone tries to use a country code or something on your site. If I were you I would just stick to the classic text box, ugly as it may be.