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
Joe
Wed, 01/09/2013 - 10:01
Permalink
Love it!
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