Avatar of lvandevender2008
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
.</asp:RequiredFieldValidator></td>
                   </tr>
                   <tr>
                       <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;
                       </td>
                   </tr> 
                   <tr>

Open in new window

HTMLScripting LanguagesJavaScript

Avatar of undefined
Last Comment
scrathcyboy

8/22/2022 - Mon
glcummins

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">
<html>
<head>
<script>
function mask(f){
tel='(';
var val =f.value.split('');
for(var i=0;i<val.length;i++){
if(i==2){val[i]=val[i]+')'}
if(i==5){val[i]=val[i]+'-'}
tel=tel+val[i]
}
f.value=tel;
}
</script>
</head>
<body>
<form>
<input name="phone" type="text" onblur="mask(this)">
<input type="submit" value="Submit" />
</form>
</body>
</html> 

Open in new window

glcummins

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.
lvandevender2008

ASKER
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
glcummins

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.
scrathcyboy

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

ASKER CERTIFIED SOLUTION
scrathcyboy

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
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
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.