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

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?

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