Avatar of lvandevender2008
 asked on

HTML phone number input mask in a text box

I am using notepad, visual studio 2005 and adobe photoshop to create my first website. Everything is going great and i have learned so much already. I almost have the website completed for this company my friend owns. I am having a problem figuring out one little thing. I have a text box i created and I need an input mask for a phone number. I can't find an example in google that is getting the job done.  I was hoping that some of you would have some suggestions. Right now i just have it set up where if the user types in an invalid phone number a red message will come up. Well the owner of the company wants that text box preformatted so where all the user has to do is type in the numbers. Below is all of the current code i have right now that is associated with the phone number text box
                       <td style="text-align: right;"><nobr>Phone Number:</nobr></td> 
                       <td style="text-align: left;" colspan="2">
                            <asp:TextBox ID="txtPhoneNumber" runat="server"></asp:TextBox>&nbsp;
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPhoneNumber"
                               ErrorMessage="RequiredFieldValidator" Display="Dynamic">Phone Number cannot be left blank.</asp:RequiredFieldValidator>
                           <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtPhoneNumber"
                               ErrorMessage="RegularExpressionValidator" ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" Display="Dynamic">Please enter a valid phone number.</asp:RegularExpressionValidator>&nbsp;&nbsp;

Open in new window

HTMLScripting LanguagesJavaScript

Avatar of undefined
Last Comment

8/22/2022 - Mon

Here is one possible method. Note that this method requires that only numbers be entered into the box (you can strip out any extra characters in Javascript is you desire):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
function mask(f){
var val =f.value.split('');
for(var i=0;i<val.length;i++){
<input name="phone" type="text" onblur="mask(this)">
<input type="submit" value="Submit" />

Open in new window


An alternative is to use three separate input boxes, one for the area code, one for the prefix, and one for the last four digits. This is cleaner, and requires no special formatting.

ok taking that code you just added, would have i to remove my asp code that is in there for the phone number text box or will they both work together? I attached a code snippet of what i have right now for the phone number, would i just need to take that out or leave what i have in there and add your code to it? Please look at my code i have and post back..
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes

You just need to add the onblur="mask(this)" part to the input box that you create via your ASP code, and then include the javascript function 'mask()' in your Javascript section.

It is actually easier to do it right in HTML for the input field for the phone number --
This way, ASP validation is not needed, they can only enter numbers in the field input
<td><input value="" type="text" name="theDate" size="15" onKeyDown="javascript:return dFilter (event.keyCode, this, '###/###/####');"></td>

Open in new window


View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.