Javascript Input Mask v1.1
download
What?
Fill in the form above. Notice how not only do the (standard html) <input type="text/password/submit/button" ...> boxes have rounded borders, but also notice what happens when you type a password in - a html masked input field.
And check out the code - it's neat. As a developer you just need to include mask.js, slap a class on each input box you want to skin, and call this function: _skinner.skinByClass("theClassNameHere"); when your document loads (eg <body onload="_skinner.skinByClass("theClassNameHere");">) and voila!
To make the password box masked, it's also pretty simple: _skinner.maskByClass("theClassNameHere"); will apply the input mask to any <input>'s with that className.
Changing the images
By far the easiest way is to open the supplied images (in the /images/ folder!) and edit those.
Save them at whatever size you want your input boxes to be; the javascript automatically resizes the inputs to the dimensions of the images.
copies of your images, I'd love to start a gallery!
If you're really fussy and you want to specify a different folder or different names for the images, you can do this by poking skinner's setup. For example, if your mask images are located in the "mask" folder and are named "im0.png", "im1.png" etc and you've done 5 images, you can tell skinner this by using these commands before calling skinByClass or maskByClass:
_skinner.lock_prefix = "./mask/im";
_skinner.lock_suffix = ".png";
_skinner.max_locks = 5;
What does it work in?
Currently tested OK in FF2, IE6, IE7 (yes! It works in IE!!). Non-JS browsers will see perfectly normal <input> boxes.
If you're running something different, with your experience - does it work? does it crash? does it stop crashing if you change the code in a certain way?
Bugs / Limitations
Ok, there's one small bug :(
If the field to be masked already has a value (eg your html looks like this: <input type="password" name="pass" value="secret" class="maskme">) then skinner will remove the value.
You shouldn't be giving password boxes default values.
Why does it do this? Because MSIE applies the text-indent only after a keypress has occured, so I can't hide the *'s onload.
Uncomment the el.value = ""; on line 169 of mask.js if you really need a default value on your password box, but beware that it'll look ugly until the user presses a key on that input box (fixes very welcome!)
Oh yeah, and the flashing text cursor disappears on masked fields. Same reason.
And the only limitation I can think of is that you can't specify different mask images for different fields. You're unlikely to want more than one password field per page - and even if you do, you're unlikely to want them displayed differently. Still, if there's a clamouring for it, I'll add that feature.
As for skinning, you can add an optional second paramenter to the skinByClass function, specifying the image to use as a skin:
example: _skinner.skinByClass("theClassNameHere","./images/myskin.jpg");
In this way, you can skin with multiple images by using different classNames (a better way would be to just do it in pure CSS)
How it works
The skinning is easy; we just change the background-image. You don't even need javascript to do that (<input style="background-image: url('yourskin.gif');" />).
The masking? You'll laugh. Onkeydown, we change the background-image attribute of the password box, incrementing up to (max_locks). On the server are sitting a bunch of premade background images:
lock0.gif: 
lock1.gif: 
lock2.gif: 
lock3.gif: 
lock4.gif: 
lock5.gif: 
lock6.gif: 
lock7.gif: 
Muahahaa. Simple, eh?
Of course, then there's preloading the images, making it browser-independant, resizing the input's if the image dimensions change, encapsulating the script in a nice JSON object to avoid potential variable-name conflicts, testing, etc. Everything looks easy once it's finished.
Who wrote this?
I did.
Other resources which were helpful were panoramio and ChrisScott from the wrox forums.
Cool, what shall I do now?
Well, if you love skinning form elements then Del has a great bit of code to skin select boxes. You just read past the link.
Finally, the rest of my website might have something interesting to you.
-user24.