Keyboard Navigation between Input Fields using JQuery

If you have a form with several input fields, one can easily add keyboard based navigation using JQuery. This means, that if the user is in the 1st input field and pushes the down key, the focus jumps to the next field, etc.

To achive this, we define two helper functions, which find the next or the previous instance for a given selected range:

jQuery.fn.elementAfter = function(other) {
    for(i = 0; i < this.length - 1; i++) {
        if (this[i] == other) {
            return jQuery(this[i + 1]);
        }
    }
    return jQuery;
};

jQuery.fn.elementBefore = function(other) {
    if (this.length > 0) {              
        for(i = 1; i &lt; this.length; i++) {
            if (this[i] == other) {
                return jQuery(this[i - 1]);
            }
        }
    }
    return jQuery;
};

To use this with input fields, we can add the following in the jQuery(document).ready function:

$('input').bind('keyup', function(evt) {
  if (evt.keyCode == 40) {
      // down key
      $('input').elementAfter(this).focus();
  } else if (evt.keyCode == 38) {
      // up key
      $('input').elementBefore(this).focus();
  }
});

There you go, once the focus is in any input field, you can easily navigate to the previous/next one, using the up/down keys.

QSyntaxHighlighter - Colorized Braces

As I've written in one of my previous posts I like the idea to color subsequent braces differently to improve the overall readability.

Hacking this into QSyntaxHighlighter is, as almost everything in Qt, quite easy. I created a struct, which saves the number of braces, left open for each block (paragraph):

struct BlockData : public QTextBlockUserData
{
    int numBraces;
};
Within the highlightBlock method, one can easily access this information, process all braces of the current paragraph, and save the number of open braces:

void Highlighter::highlightBlock(const QString &text)
{
    BlockData* data = dynamic_cast<BlockData*>(
                currentBlock().previous().userData());
    int numberOfOpenBraces = 0;
    if (data != NULL) {
        numberOfOpenBraces = data->numBraces;
    }

..tokenizing...update numOfOpenBraces..

    BlockData* newData = dynamic_cast<BlockData*>(currentBlockUserData());
    if (newData == NULL) {
        newData = new BlockData();
    }
    newData->numBraces = numberOfOpenBraces;
    setCurrentBlockUserData(newData);
}

This is an example expression, without coloring or braces:

This is the same example, with coloring: (Yes, I might want to change the colors, I know...)

The complete source code can be found here: Highlighter.cpp

Better Syntax Coloring for IDEs

Modern IDEs like Eclipse already provide excellent syntax highlighting. Still I think there is room for improvement.

One idea of my ideas would be to color brackets differently. Instead of drawing them all in the same color, rotating through a color wheel would make it much easier to check, where which bracket is closed.

So this example code:

Would look like this:

Of course it's a detail, but a visual cue like this can help when you would try to extract the inner expression in FTFilter.notAnalyzed - Just start your selection from the green bracket, to the closing green bracket and you're done.

I already downloaded the JDT sources of Eclipse, but in order to have a fast and precise syntax coloring, the code is quite complex and I don't have the time to work into this. Still I believe a JDT developer could implement this feature very quickly - if you happen to know one, you might want to forward the URL ;-)

If you think this is a good idea, vote me up on DZone, or retweet this or +1 it on google... If there is enough positive feedback I'll go and file a bug for Eclipse, maybe it'll be in one of the next versions...

Update 1: I received a lot of positive feedback, thanks everybody. Three other programs seem to already support this feature: Microsoft Excel, Pharo Smalltalk (I think, only when the cursor is near a brace) and the Closure Plugin for Eclipse.

Additionally I hacked this functionality into a subclass of QSyntaxHighlighter for one of my Qt toy projects. As I've written here, this is quite simple.

Update 2: Just filed a Bug for Eclipse JDT-Text: https://bugs.eclipse.org/bugs/show_bug.cgi?id=370745