Tuesday, March 29, 2005

New Usability Trick :: Click and Drag Links for Data Entry

Doing cross frame copy and paste in mozilla is nigh on nasty. You don't have access to the clipboard, which I had counted on to one-click copy information from a search pane to my results. (unless you sign your javascript application or mess with settings, more often than not beyond my means).

I did something that I never knew I could in firefox. I clicked on a link, held down the mouse, and dropped it into form input.
Sure, I knew about doing that, I'd done it by mistake every now and then. However, up to this point it wasn't in my mind as a kick ass data entry method.


<p><a href="text">Link</a></p>

<form><p><input /></p></form>

Try it:

Drop Here:

Oh, whoopie - it's got http://clockwerx.blogspot.com/text though! That's useless to us.

To be effective, we need to be a bit clever. The urn: prefix on a string will tell mozilla that we are talking about a Uniquely Named Resource. In my case that fits my use of it so completely it's dumbfounding - product data entry.


<p><a href="urn:isbn:0765304368">Down and Out In The Magic Kingdom</a></p>

<form><p><input /></p></form>

Try it:

Down and Out In The Magic Kingdom
Drop Here:

Now, my users will only ever have to type in one search and transfer the results with a flick of the wrist, across frames, windows and all other barriers. That's cool!

Of course, you cry, there's still the urn:isbn: prefix. Well, fear not. That's a functioning actual link, even if your browser doesn't support it - there's an IETF RFC on the use of urn:isbn: to identify books.
And if your problem is with the text itself rather than the un-semantic idea of it, you can either set all of your input fields to trim off "urn:isbn" onmouseout, or you can let your server side script deal with it.

Ok, ok, there's flaws if you don't deal with books, but surely urn:applicationname:product:barcodehere is a great URN!

Selecting Text

I ran into this problem while fooling about over the last few days, and it took me a while to find the right solution for firefox. It's -moz-user-select, custom CSS that lets you either set it to normal or none. The cool thing, compared to all other hack solutions? Links are still draggable.

What do you all think?
Post a Comment