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 = '
- ';
arrInput += '
- ';
arrInput += '
';
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();
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