All Things Techie With Huge, Unstructured, Intuitive Leaps
Showing posts with label html input tag. Show all posts
Showing posts with label html input tag. Show all posts

Javascript - How To Format a Telephone Number

This is quite a common problem. You have an user input table on your html or jsp page and you want to make sure that it is numbers only, has the area code, and is in a consistent format when you put it into the database. I downloaded some javascript to do just that and it worked fine for numbers that you typed in using the numbers on the keyboard. But when you used the numeric keypad on the keyboard, or a USB external keypad, it failed. The keypad, instead of putting numbers, put junk into it.

So this is how I solved it. I created a javascript file called phone.js. This is the contents:

function formatPnum(phonenum, textbox) {
var regexObj = /^(?:\+?1[-. ]?)?(?:\(?([0-9]{3})\)?[-. ]?)?([0-9]{3})[-. ]?([0-9]{4})$/;
if (regexObj.test(phonenum)) {
var parts = phonenum.match(regexObj);
var phone = "";
if (parts[1]) {
phone += "(" + parts[1] + ") "; }
phone += parts[2] + "-" + parts[3];
textbox.value = phone;
}
else {
//invalid phone number
alert('Please enter a proper phone number');
textbox.value = '';
}
return false;
}

Then at the top of the html page, I added the following script tag:

(script type="text/javascript" src="phone.js" /)

Note: I used "(" and ")" instead of "<" and ">" because this blog actually parses it as real HTML. Then, everywhere I needed a phone number, I added this to the tag (in this case for a fax number):


Fax (Area Code + #)
(input type="text" name="fax" onfocus="this.value='';" onmouseout="javascript:return formatPNum(this.value, this);")


Note: I used "(" and ")" instead of "<" and ">" because this blog actually parses it as real HTML.
You will note, that I have an onfocus event. When the user clicks on it, the previous number or whatever is in the input box goes away. Then the user enters the number. If any part of it fails (like he adds a letter), it fails and the alert shows that there is an error. There is no input displayed. However, if the user enters a three digit area code and a seven digit number, the phone number is automagically formatted into (123) 456-7890.

Piece of cake. Hope this helps.

Quick Tip: Clear an HTML Input When You Click On It

How does one clear an html input, when you click on it or it gets focus? I had to look this up, and anything that I have to look up, I reprint to help others find it quickly.

In any mobile app, it is a real pain to remove input text if you have to replace it. It is much easier to have it automagically clear when anyone clicks on it to give it focus in order to change it.

Here is a simple way of doing it. Just add this attribute to the input tag:

onfocus="this.value='';"

The value for this.value is a single quote (') repeated for the null. Easy Peasy!