One of my pet peeves with Internet Explorer comes as I read a site or navigate the internet with the keyboard – but then have to use the mouse to click on a single, isolated edit box.  One solution is to use the ‘Tab’ key until I reach the edit box, but a page full of links can often require 50 or more presses of the ‘Tab’ key to get the edit box.

Here’s a perfect example.  You go to your search engine of choice (Win+R, www.ouhn.net or www.sfjl.net) and type in a query.  The query doesn’t give you the approximate results you hope for, so you press ‘Tab’ 15 times to get back to the edit box.

Here’s a solution that accomplishes that much more efficiently.  It has a lot of moving parts, but definitely works:

The Javascript Bookmarklet.  Bookmarklets are small snippets of Javascript that execute from your browser’s address bar.  For example, try the following in your address bar:

• javascript:alert(“hello world”)
• javascript:void(document.bgColor="#CCFFCC")

They are great, because they let you inject script into the page itself – giving you access to the content, DOM, and much more.  As far as I know, the concept originates from http://www.bookmarklets.com in 1998.  Think of them as the limited-length precursor to Firefox’s GreaseMonkey scripts.

Bookmarklets are usually published on a page as a simple Javascript link.  Rather than click it, you drag the link up to the “Links” section of your address bar.  After you accept the warning that the link may be unsafe, you can then click on the link in your “Links” bar to invoke whatever functionality the Bookmarklet surfaces.  That forms the core of the solution.

To solve the problem, we use two bookmarklets: one to set the focus to the previous editable DOM element, and one to set the focus to the next editable DOM element.  Drag the URLs below to your ‘Links’ bar in Internet Explorer to let you use these buttons to quickly focus the next text box. 

Prev

javascript:var d = document; var e = d.all; var fc = false; var c = e.length - 1; while(! (fc && e[c].isContentEditable)) { if(e[c].uniqueID == d.activeElement.uniqueID) if(fc) { break; } else { fc = true; } c = (c + e.length - 1) % e.length } e[c].focus()

Next

javascript:var d = document; var e = d.all; var fc = false; var c = 0; while(! (fc && e[c].isContentEditable)) { if(e[c].uniqueID == d.activeElement.uniqueID) if(fc) { break; } else { fc = true; } c = (c + 1) % e.length } e[c].focus()

In short, these links cycle through every element of the DOM, stopping at the first one before or after your “current” element.

The Hotkey.  We haven’t actually solved the problem yet, as you still have to click on the link button to have it focus the next edit box.  To solve that problem, use a Hotkey / Macro program that automates your keystrokes.

Since these are the only two links in my “Links” bar, I can access the “Previous” button with the following sequence of keystrokes:

1. F10 to open the menu bar
2. ‘A’ to open the favourites menu
3. ‘L’ [ENTER] to open the links submenu
4. ‘P’ to select the ‘Prev’ saved link.
5. ALT to get the cursor out of the menu bar

To access the ‘Next’ saved link, I use ‘N’ instead in step d.

To actually automate these keystrokes, I use a program called AutoHotkey.  When I’m in Internet Explorer, I have AutoHotkey map Control+Alt+N to the the keystroke sequence for the ‘Next’ link, and Control+Alt+P to the ‘Prev’ link.

Here is its configuration script:

;;
;; Next text box in IE
;;
#IfWinActive, ahk_class IEFrame
^!n::Send {F10}al{ENTER}n{ALT}
#IfWinActive

;;
;; Previous text box in IE
;;
#IfWinActive, ahk_class IEFrame
^!p::Send {F10}al{ENTER}p{ALT}
#IfWinActive

Works like a charm.