phone number validation with added input

I recently filled out a form and when I got to the phone number textBox I noticed some really cool things going on. As I entered my number, general phone symbols were getting added automatically. Example:

I start ent开发者_如何转开发ering my area code '555'

and my input was changed to 1 (555)

to test what just happened I backspaced on the ) and it quickly added it back in.

So my question is, how do I get this input to happen?

---

I use a javascript library called automask - you dont see the mask but it wont let you type anything outside the mask

for instance if your mask is ###-###-#### then any other characters are ignored (ie not 0-9) and the dashes are put in automatically.

I can post the library if you would like to take a look at

example of implementation

<input type=text name=ssn onkeypress="return autoMask(this,event, '###-##-####');">

// email kireol at yahoo.com
// autoMask - an adaption of anyMask
// 
// this will force #'s, not allowing alphas where the #'s are, and auto add -'s
function autoMask(field, event, sMask) {
    //var sMask = "**?##?####";


var KeyTyped = String.fromCharCode(getKeyCode(event));
var targ = getTarget(event);
keyCount = targ.value.length;
if (getKeyCode(event) < 32)
{
    return true;
}
if(keyCount == sMask.length && getKeyCode(event) > 32)
{
    return false;
}
if ((sMask.charAt(keyCount+1) != '#') && (sMask.charAt(keyCount+1) != 'A' ) && (sMask.charAt(keyCount+1) != '~' ))
{
    field.value = field.value + KeyTyped + sMask.charAt(keyCount+1);
    return false;
}

if (sMask.charAt(keyCount) == '*')
    return true;

if (sMask.charAt(keyCount) == KeyTyped)
{
    return true;
}

if ((sMask.charAt(keyCount) == '~') && isNumeric_plusdash(KeyTyped))
    return true;

if ((sMask.charAt(keyCount) == '#') && isNumeric(KeyTyped))
    return true;

if ((sMask.charAt(keyCount) == 'A') && isAlpha(KeyTyped))
    return true;

if ((sMask.charAt(keyCount+1) == '?') )
{
    field.value = field.value + KeyTyped + sMask.charAt(keyCount+1);
    return true;
}
return false;


}
function getTarget(e) {
    // IE5
    if (e.srcElement) {
        return e.srcElement;
    }
    if (e.target) {
        return e.target;
    }
}

function getKeyCode(e) {
    //IE5
    if (e.srcElement) {
        return e.keyCode
    }
    // NC5
    if (e.target) {
        return e.which
    }
}

function isNumeric(c)
{
    var sNumbers = "01234567890";
    if (sNumbers.indexOf(c) == -1)
        return false;
    else
        return true;

}

function isNumeric_plusdash(c)
{
    var sNumbers = "01234567890-";
    if (sNumbers.indexOf(c) == -1)
        return false;
    else
        return true;

}

function isAlpha(c)
{
    var lCode = c.charCodeAt(0);
    if (lCode >= 65 && lCode <= 122 )
    {
        return true;
    }
    else
        return false;
}

function isPunct(c)
{
    var lCode = c.charCodeAt(0);
    if (lCode >= 32 && lCode <= 47 )
    {
        return true;
    }
    else
        return false;

}

---

If this was an aspx page, they were probably using the AJAX Control Toolkit MaskedEdit Extender. There is also the Masked Input plugin for jQuery.