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!

Javascript: Getting Rid of Unwanted Characters in Number Field

I had a field on a web page where a person would fill in their tax rate as a percentage. Of course, people would put in the percent sign ( % ) along with the number and it would choke the web page. So I needed a quick javascript function to strip out unwanted characters, and leave just numbers and the period if it were a decimal number.

Here is the snippet required. I take the form input. The form name is refForm and taxRate is an input value. The ^ is a negation sign in javascript so I am taking everything out except numbers and decimal.

var si = document.refForm.taxRate.value.replace(/[^\d.]/g, "");

document.refForm.taxRate.value = si;

I assign the original value to a variable and then pass the value back to taxRate after the characters are gone.

Easy way to replace all characters and just leave the numbers using javascript.