jQuery - Splitting a phone input into three

Thought I'd share this little snippet that helps you to break a single phone number text input into three smaller inputs. This also has a helper that will move the focus from one input to the next as the user types.

  /**
   * Split phone number field into three smaller fields.
   */
   $.fn.splitPhone = function() {
       // Generate markup for smaller fields.
       function phone_split(phoneId){
           var arrInput = '<input type="text" name="'+phoneId+'[]" id="'+phoneId+'1" class="phone-part" value="" size="4" maxlength="3" tabindex="1" /><span class="sep_phone"> - </span>';
               arrInput += '<input type="text" name="'+phoneId+'[]" id="'+phoneId+'2" class="phone-part" value="" size="4" maxlength="3" tabindex="2" /><span class="sep_phone"> - </span>';
               arrInput += '<input type="text" name="'+phoneId+'[]" id="'+phoneId+'3" class="phone-part" value="" size="5" maxlength="4" tabindex="3" />';
           return arrInput;
       }
 
       this.each(function() {
           var $this = $(this);
           if (!($this.is(':text') || $this.is(':hidden'))) { return; }
           var tabIndex = $this.attr("tabindex") ? $this.attr("tabindex") : 1;
 
           // Bind behaviors to new small fields.
           var $arrInput = $(phone_split($this.attr("id"))).filter("input");
           $arrInput.each(function(){ 
             $(this).attr("tabindex", tabIndex++);
             // Move focus to next field as user types.
             $(this).bind("keyup", function(e){
               if ($(this).val().length == $(this).attr('maxlength')){
                 $(this).nextAll('.phone-part').first().focus();
               }
               // As user completes, concatenate values in original field.
               $this.val($arrInput[0].value+$arrInput[1].value+$arrInput[2].value)
             });
            }).end().insertBefore($this);
 
           // Hide original field.
           $this.attr("Type", "hidden").removeAttr("tabindex").hide();
 
           // Don't submit the values of the small fields!
           $this.parents('form').submit(function(){
             $arrInput.each(function(){
               $(this).attr('disabled', true);
             });
           });
       });
 
       return this;
   };

Use like so:

$('#edit-field-phone-number').splitPhone();

Comments

This is really slick! Thanks so much for this!

One small usability problem: if the submit event fails for whatever reason (eg validation), the phone number fields remain disabled. So, a user could enter their phone number wrong, receive a validation error on a different field ("Name is required"), then realize that their phone number is wrong, but be unable to change it.

I got around this by commenting out the line that disables the input field, since I don't care if extra data is submitted. I'll just ignore the extra fields on the back-end. Is that the only reason you're disabling the small fields?

Anyway, great job and thanks for the clean, well-commented code. A pleasure to read and use.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.