78 Special characters, on the fly

Posted: Oct 11, 2006, under ODP, DHTML. Updated: Oct 12, 2006. Add a comment!

Are you away from your regular computer or notebook and you find yourself in need to generate certain special characters for a webpage? The solution is simple: use a bookmarklet that will bind those characters to certain keyboard shortcuts.

1. A bit of background

The bookmarklet first started to prove useful to me when I started working as an Open Directory editor in the Romanian section. Common sense dictates that website descriptions should carry proper Romanian diacritics, but I wasn’t always editing from a computer that had the Romanian keyboard layout available.

2. What is a bookmarklet?

Good question. Basically, it’s a link, found on a web page. Except instead of leading to a web URL (such as http://...), it executes a piece of JavaScript code. That code will stay active until you leave that page.

That’s not very useful, you’ll say. But wait, there’s more. If you drag the bookmarklet to your favorites (or bookmarks), you will be able to activate it on any page. Which is what I did: whenever I entered the page where the site description had to be filled in, I’d click on this bookmarklet in my bookmarks toolbar and presto, I got Romanian special characters at my fingertips.

3. How does it work?

This bookmarklet does the following:

  • Defines a translation table, binding certain keys to certain Unicode characters. In my case, the keys qastiQASTI were bound to âăşţîÂĂŞŢÎ, respectivelly.
  • It examines the page and looks for text or textarea form fields. It stops with an error message in case there aren’t any.
  • If it finds at least one, it goes on to listen to keystroke events. Every time one of the relevant keys is pressed (in combination with Control, not by itself), and you’re currently editing a text or textarea field, it jumps in and inserts the related character at the cursor position.

I’ve tested it successfully in recent versions of Internet Explorer, Firefox and Opera. (Please report additional success or failure cases.)

4. Known issues

You can’t load more than one such bookmarklet at the same time. For the sake of sanity, it checks a global variable to see if it has already been loaded. But I recognize the need to have several such bookmarklets working side by side. If you have an elegant idea of how to signal that, please leave a comment.

5. Credits

The character insertion functionality was provided by Alex King. For any additional credits see below next to each bookmarklet.

6. I’m sold, give it to me

Look in the list below for the bookmark that’s good for you. Drag-and-drop it to an easy to reach place within your favorites and bookmarks. Whenever you need those special characters, load it by clicking once. Then focus a text or textarea form field and use Control and a key together to produce the special character.

Note: When you leave a page you will lose the effects of the bookmarklet. You need to load it again for each page you want to use it on. Sorry, that’s how JavaScript works.

Please leave a comment if you want to produce version of these bookmarklets for your own language. No need to repost the entire JavaScript code, just mention what key should produce what Unicode character (in 2-byte hex code, preferrably, ie. \u015E).