I'm working on a form and I'd like to mask the input of the phone numbers. The plugins what I found aren't okay for me since the area code could be 1 or 2 character long. What I'd like to do is the following: when the user types his number after the first two character the script inserts a space on keyup, then after the next three and later after every fourth character. So when someone types 44444444444 then in the textbox appears 44 44 444 4444. I must check the second group as well, and when someone types there for example 1, the the number must look like: 44 1 444 4444

Is any solution to do that?

I'm working on a form and I'd like to mask the input of the phone numbers. The plugins what I found aren't okay for me since the area code could be 1 or 2 character long. What I'd like to do is the following: when the user types his number after the first two character the script inserts a space on keyup, then after the next three and later after every fourth character. So when someone types 44444444444 then in the textbox appears 44 44 444 4444. I must check the second group as well, and when someone types there for example 1, the the number must look like: 44 1 444 4444

Is any solution to do that?

• javascript
• jquery
• regex

• "I must check the second group as well, and when someone types there for example 1, the the number must look like: 44 1 444 4444", is that the case only for 1? – Qtax Commented Jul 5, 2011 at 9:27

2 Answers 2

You could do something like this:

http://jsfiddle/ffwAA/4/

Which applies this function to the string to get the desired formatting:

function formatCode(str){
    var result = str;

    str = str.replace(/\D+/g, "");
    var m = str.match(/^(\d\d)(?:([2-90]\d|1)(?:(\d\d\d)(\d+)?)?)?$/);

    if(m){
        result = m[1] + " ";
        if(m[2]) result += m[2] + " ";
        if(m[3]) result += m[3] + " ";

        if(m[4]){
            result += m[4].split(/(\d{4})/).join(" ");
            result = result.replace(/\s+/g, " ");
        }
    }

    return result;
}

And using this jQuery to set it up:

function update(obj){
    var val = obj.value;
    var got = formatCode(val);

    if(got != val)
        obj.value = got;
}

var timer;
var prev_val = "";

$('#code').keyup(function(){
    clearTimeout(timer);

    // when adding numbers at the end of input, update at once
    // don't want to update when editing in the middle of the string or removing parts of it
    // because it would move the carret location to the end of input, and make it unusable
    if(this.value.indexOf(prev_val) == 0){
        update(this);
        prev_val = this.value;
        return;
    }

    prev_val = this.value;

    // in other cases update 1 second after the changes are done
    timer = setTimeout(update, 1000, this);
});

Have you tried the maskedInput plugin?

http://digitalbush./projects/masked-input-plugin/

I think it can solve your problem.

Hope this helps. Cheers