0

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?

1
  • "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? Commented Jul 5, 2011 at 9:27

2 Answers 2

3

You could do something like this:

http://jsfiddle.net/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);
});
Sign up to request clarification or add additional context in comments.

Comments

2

Have you tried the maskedInput plugin?

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

I think it can solve your problem.

Hope this helps. Cheers

1 Comment

yes, I tried but the problem is the area code. With this plugin I can mask the area code as two or one character. :s

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.