Question

I’d like to split my phone number fields into 3 fields (area code, next 3, next 4). I want to account for a few conditions:

1. After the field has the specified number of digits, the cursor will automatically move to the next field.
2. If a user pastes their entire phone number in the first field, jQuery will distribute the 10 digits out accordingly.

I’ve gotten #1 to work, no problem: How to move cursor to next field auto without hit Tab Key in Silverlight?

However, #2 is proving to be way out of my jQuery league – so I am requesting some help here.

Secondly, I’m wondering if I’m overlooking anything here? I don’t think so, but I thought I’d throw it out there.

I should add that I’ve considered this: http://digitalbush.com/projects/masked-input-plugin/#demo – but I tend to think that the above is more pleasing to users…perhaps I am mistaken though.

Update – USA only phone numbers =).

Update 2 – A friend sent me this: http://www.mathachew.com/sandbox/jquery-autotab/

Answer 1

Something like this – take the field value, remove the non-numeric characters, test the length, and split it up if necessary:

$('#telephone1').on('change',function(e) {
    var $this = $(this),
        phone = $this.val().replace(/\D/g, ''); // remove non-numeric characters
    if (phone.length > 3) {
        $('#telephone3').val(phone.substr(6,4));
        $('#telephone2').val(phone.substr(3,3));
        $('#telephone1').val(phone.substr(0,3));
    } else {
        $('#telephone1').val(phone);
    };
});

http://jsfiddle.net/v6was/