State of the Masked Input Plugin

This post should be titled, "Dude, Where the Hell have You Been?" I'm sorry I have ignored this project for so long.

New Home
First, let me get started by saying that I moved the source to github a while back.  It now lives here. If you look at the commit history, I moved it there months ago, fixed a few outstanding bugs, added a feature that someone needed for a specific project and then just left it. I'm picking it back up somewhat, but we'll talk about that in a minute.

Email Bankruptcy
There have been a TON of emails from you guys; so many that I haven't been able to keep up.  Most of the emails have been about two bugs: an off by one goof I made for the completed function and forgetting to use charAt() to access a char in a string. These bugs are fixed in the github repo right now (I think). I'm calling my email situation a total loss.  Sorry to those that have emailed me and not gotten a response.

Birth of a New Project
Part of the reason I stalled on this project was a lack of tests.  For a while I wasn't sure how to even test this thing given that it is purely driven from user input.  Up to this point I had just been opening up a test page in every browser I could think of and running through a few things manually.  A couple of weeks ago I sat down one night and spiked out a rough version of a keystroke simulator which I'm now calling KeyMasher. Please be kind, it's still very rough. Once I get it more polished, I'll put up an official project page on my blog here.  I had found a few other projects which do this and jquery.autotype seemed to be the closest fit. Unfortunately I couldn't get it to work with my specific needs, so I've now written my own with a syntax I feel more comfortable with.  I've already worked out a few tests using this against my masked input plugin.

I'm Just One Guy
After I get a half way acceptable set of tests around it, then I can feel a bit more confident about what I change.  I would like to be able to implement some of the features I've seen come across my email. It will take some time to get everything to a place where it should have already been.  Please be patient, I'll get there. 🙂

Hotlink Help

Since I moved my blogs onto a server which I control, I've been spending quite a bit more time looking at log files. While digging through a log file for the web server, I happened across some funny referrer names for my watermark plugin for jQuery. Hmmm. I pulled up the site, clicked view source, and sure enough there was a reference to

Hotlinking is bad. First of all, it's not nice. You are forcing your users to consume my bandwidth which I pay for. Granted, it's a trivial amount for my small plugins, but still, there is a principal involved here. Second, by hotlinking my javascript files, you are putting a whole lot of faith in my server staying online. This shouldn't be a problem going forward, but you can never tell when I'll decide to take the whole thing down to do some upgrades. Third and finally, your linking directly to javascript files which I host puts you and your users at risk of my scripts doing something malicious like capture keystrokes or put nasty images on your pretty site.

Now that I know there is a problem, I aim to fix it. I could be nice and put a friendly alert("Please don't hotlink to"); at the top of the file. I could just yank the files off the server and leave your page broken slightly. Those seem too nice. It's almost a new year and I'm feeling empowered. I want to be a little mischievous. I love a good prank; especially when said prank can teach a little lesson. Besides, none of the sites I've seen so far seem very large or important.

The problem with all of this is that I'm a little torn. I'm not sure what to do. I mean, imagine the possibilities! In no certain order, here's what I've thought about doing:

  • Inject a banner at the top announcing how awesome is.
  • Set a style display:none to the body of the page.
  • Cornify the offenders site.
  • For the watermark plugin specifically, I could hard code the watermark to say
  • Redirect to the google translated version of the site in Russian.
  • Alter the alignment of divs by a few pixels to mess up the layout.
  • Randomly animate things by timer or by event.
  • Change all of the links to point to
  • Change all image sources to point to a script which returns an upside down version.
  • A random selection of the above.

There are just too many options! Dear Reader, what should I do? Should I be conservative and just do an alert? Should I do something else? I'm not going to do anything profane, pornographic, or malicious. I just want to have a little fun. Please give me your input and ideas. I'd love to hear from you.

Reason #6,182 to hate Internet Explorer

The other day I wanted to make a <select /> element a little easier for my users to select multiple options.  My plan was to capture the mousedown event on the <select />, grab the target <option />, select it and then cancel the event.  All was well until I got around to testing in IE.

Guess What?  It turns out that IE doesn't do diddly with <option /> elements.  The event argument on mousedown, click, mouseup, mouseover, and any other mousing motion on a <select /> will have a srcElement property equal to the <select /> and not the <option /> LIKE EVERY OTHER BROWSER ON THE PLANET.

As a last ditch effort, I even tried to grab the element under the mouse cursor by trying "document.elementFromPoint(e.clientX, e.clientY)".  When I checked the value in the debugger, there sat the same <select /> element as before just mocking me. That's all I have.  Time to move on to more important problems. 

In summary, damn you IE and your non-standard ways.

Masked Input Plugin 1.2.1

There is now a new version of my Masked Input Plugin for jQuery.  Version 1.2.1 moves one step closer to my bigger picture for the plugin.  I had to make a few breaking changes to do so, but I feel that the end result is worth it.  This release adds a lot more polish to the 1.2 release.  Here's what we've got.

  • BREAKING CHANGE: Removed deprecated $.mask.addPlaceholder method.  Use the "$.mask.definitions['']="";" syntax instead.  I said I was going to do this on the last release and now seems just as good a time as any.
  • BREAKING CHANGE: Removed "allowPartial" option in favor of new mask syntax I'll describe below.  A discussion and code exchange with Michael Bray inspired this change.  I hate that it's a breaking change, but the new way makes a lot more sense.
  • New mask syntax option '?'.  Anything listed after '?' within the mask is considered optional user input.  The common example for this is phone number + optional extension.  The new syntax will look like this: "(999) 999-9999? x99999"
  • I got rid of the awkward input behavior where users typed over top of existing input.  The plugin acted like a word processor Insert mode.  This has always agrivated me, so now the input shifts on input and backspace/delete.
  • Now calling .change() on blur if the value has changed since the plugin prevents the change event from being fired naturally.
  • Pasting incomplete test no longer wipes the input.  Instead, the cursor is just placed where the input leaves off.
  • Fixed backspace detection for iPhone.  Plugin is now iPhone compatible.
  • Fixed pasting bug when mask starts with a literal and caret position is on the literal character.
I feel really good about this release.  I made some changes that I feel are good for the direction of the plugin.  Iif you don't like some of the changes please let me know and I'll look at adding them back in as options.  I'm trying hard not to bloat things up, but I don't want to remove features that are needed.

« Previous Page