I was looking around for examples of some Javascript that would format a phone number as it was being entered into a text form element. The ones I found were overly complicated and very difficult to modify to use the format that I wanted: “(xxx) xxx-xxxx”. So I wrote my own, which I’ve put below. Feel free to use it if it suits your needs. If you do, please provide a link back here, if you can, or a give a mention in the HTML comments.

Enjoy. Comments and suggestions welcome.

Give it a try

Phone Number:

The code:

<script type="text/javascript">
// ---------------------------------------------------------
// Phone number formatter, created for Foodry
// For more info, visit:
// http://www.foodry.com/blog
// ---------------------------------------------------------
function formatPhone(elm, e) {
    var keychar;

    // If used in onkeypress, pass in the event and this will
    // grab the character and do the right thing. This allows
    // for a smoother user experience than if the chars are
    // being visibly deleted.
    if (e) {
        var keynum;
        if (window.event) {
            keynum = e.keyCode
        }
        else if (e.which) {
            keynum = e.which
        }

        keychar = String.fromCharCode(keynum)
    }   

    // Allow a backspace to go through, so the user
    // can correct any typos.
    if (/[b]/.exec(keychar)) {
        return true;
    } else {
        var p = elm.value + keychar;

        // Don't allow a leading 1 or 0. We also strip out all
        // non-numeric characters here to make the formatting
        // easier later on. This could be modified to allow
        // letters if you consider them valid.
        p = p.replace(/^[01]/,"");
        p = p.replace(/D+/g, "");

        // You can easily change the formatting of the phone
        // number by editing the conditionals below.
        if (p.length > 0 && p.length < 3) {
            p = "("+p;
        }
        else if (p.length >= 3 && p.length < 7) {
            p = "("+p.substring(0,3)+") "+p.substring(3);
        }
        else if (p.length >= 7 && p.length < 10) {
            p = "("+p.substring(0,3)+") "+p.substring(3,6)+"-"+p.substring(6);
        }
        else if (p.length) {
            p = "("+p.substring(0,3)+") "+p.substring(3,6)+"-"+p.substring(6,10);
        }
        elm.value = p;

        return false;
    }
}
</script>

Phone Number: <input type="text"
               size="15" name="phone" id="phone"
               onkeypress="return formatPhone(this, event)"
               onkeyup="formatPhone(this)"
               onchange="formatPhone(this)">

This entry was posted on Saturday, March 31st, 2007 at 2:27 pm and is filed under Javascript. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.