jQuery zip masking for multiple formats

Question

I have a requirements for masking a zip field so that it allows the classic 5 digits zip (XXXXX) or 5 + 4 format (XXXXX-XXXX).

I could so something like:

$('#myZipField').mask("?99999-9999");

but the complication comes from the fact that dash should not be showing if the user puts in only 5 digits.

This is the best I came up with so far - I could extend it to auto-insert the dash when they insert the 6th digit but the problem with this would be funny behavior on deletion (I could stop them from deleting the dash but it would patching the patch and so forth, it becomes a nightmare):

$.mask.definitions['~']='[-]';
$("#myZipField").mask("?99999~9999", {placeholder:""});

Is there any out of the box way of doing this or do I have to roll my own?

Answer 1

You don't have to use a different plug-in. Just move the question mark, so that instead of:

$('#myZipField').mask("?99999-9999");

you should use:

$('#myZipField').mask("99999?-9999");

After all, it isn't the entire string which is optional, just the - and onward.

Answer 2

If you're using jQuery already, there are probably hundreds of plugins for masks etc, for example: http://www.meiocodigo.com/projects/meiomask/

So I don't think you'd have to roll your own

Answer 3

This zip code is actually simple, but when you have a more complex format to handle, here is how it's solved with the plugin (from the demo page):

var options =  {onKeyPress: function(cep, e, field, options){
  var masks = ['00000-000', '0-00-00-00'];
    mask = (cep.length>7) ? masks[1] : masks[0];
  $('.crazy_cep').mask(mask, options);
}};

$('.crazy_cep').mask('00000-000', options);

Answer 4

Why not have the field be transparent, and have a text object behind it with the form in light grey? So they see #######-#### in the background, and then rig it so the letters dissapear as they type. At that point, it suggests that they should enter a dash if they want to put the extra four, right? Then, you could just rig the script to autoinsert the hyphen if they mess up and type 6 numbers?