Update - 01/27/2014: Updated library versions

Update - 08/27/2013: Revised table for Tab Override v4.0.0 and tabIndent.js v0.1.8

A few years ago, I was trying to format some HTML in the WordPress HTML editor and was frustrated by the lack of tab key support. The normal behavior of the tab key is to move the focus to the next focusable element on the page. Since this is also true for textarea elements, pressing the tab key in a textarea will move the focus away from it. Users have come to expect the tab key to function this way and changing it would most certainly be confusing. However, when the purpose of the textarea is to input code, it seems more natural for it to behave more like a simple text editor.

I came across a plugin called Tab Override by Mathew Tinsley which did exactly what I wanted, except it didn't function in all browsers and only supported inserting a single tab character at the cursor. I also found several other JavaScript implementations, including Ted Devito's Tabby jQuery plugin. However, I thought all of these could be improved upon. I did a complete rewrite of the Tab Override plugin and eventually separated the JavaScript into its own library. I've maintained the projects ever since.

Recently, some new projects have appeared that address the same issue. Two of the more popular ones are tabIndent.js and Behave.js. The projects are similar in a lot of ways, but take slightly different approaches and have different feature sets. The following is a comparison of the tabbing/indenting-related features of Tabby, Tab Override, tabIndent.js, and Behave.js:

Additional Features

Each library contains additional features which set it apart. Tabby includes a bookmarklet. Tab Override supports various module loaders and has an extension system. tabIndent.js has some built-in functional differences aimed at improving usability. Behave.js has configuration options to enable more IDE-like functionality, as well as an extension system.

Tabby

• Includes bookmarklet
• Includes minified file

Tab Override

• Extendable via hooks (has extensions for delay, escape, and style)
• jQuery plugin (allows for delegated events)
• WordPress plugin
• Bower support
• AMD and CommonJS support
• Includes minified file, source map, and unit tests (QUnit)

tabIndent.js

• 250ms delay before tabbing is enabled
• Esc key is used to temporarily disable tabIndent.js
• Includes an image to display in the textarea when tabbing is enabled (inlined in js)
• Applies a CSS class to the textarea for custom styling when tabbing is enabled
• Has shortcut methods to enable/disable tabbing on all textareas (renderAll and removeAll)
• Includes unit tests (Jasmine)

Behave.js

• Custom Code/Behavior Fencing
• Auto Open/Close Parentheses, Brackets, Braces, Double and Single Quotes
• Auto delete a paired character
• Overwrite a paired character
• Extendable via hooks

Examples

Tab Override and tabIndent.js have global options, while Tabby and Behave.js set options for each individual textarea. These examples are based on the feature set listed in the table above. For more advanced configuration examples of each library, see the corresponding project pages.

Enable/disable for a single textarea:

$('#txt').tabby(); // enable
// no disable?

var textarea = document.getElementById('txt');
tabOverride.set(textarea); // enable
tabOverride.set(textarea, false); // disable

var textarea = document.getElementById('txt');
tabIndent.render(textarea); // enable
tabIndent.remove(textarea); // disable

var textarea = document.getElementById('txt'),
    editor = new Behave({ textarea: textarea }); // enable
editor.destroy(); // disable

Enable/disable for all textareas:

$('textarea').tabby(); // enable
// no disable?

var textareas = document.getElementsByTagName('textarea');
tabOverride.set(textareas); // enable
tabOverride.set(textareas, false); // disable

tabIndent.renderAll(); // enable
tabIndent.removeAll(); // disable

var textareas = document.getElementsByTagName('textarea'),
    i,
    editors = [];

// enable
for (i = 0; i < textareas.length; i++) {
    editors&#91;i&#93; = new Behave({ textarea: textareas&#91;i&#93; });
}

// disable
for (i = 0; i < editors.length; i++) {
    editors&#91;i&#93;.destroy();
}
&#91;/javascript&#93;

<br />
<p><strong>Set the tab size:</strong></p>

[javascript]
$('#txt').tabby({ tabString: '    ' });

tabOverride.tabSize(4);

tabIndent.config.tab = '    ';

var editor = new Behave({
    textarea: document.getElementById('txt'),
    tabSize: 4
});

Enable auto-indent (not supported in Tabby, always enabled in tabIndent.js):

tabOverride.autoIndent(true); // default

var editor = new Behave({
    textarea: document.getElementById('txt'),
    autoIndent: true // default
});

Set the key combination used for tab and untab (Tab Override only):

tabOverride
    // set the tab key combination to ctrl+]
    .tabKey(221, ['ctrl'])

    // set the untab key combination to ctrl+[
    .untabKey(219, ['ctrl']);

Demos

Tabby

Shift+Tab only works for multi-line selections (except in IE 6-8).

Try out Tabby on this textarea element. Use the tab key to add a tab character. Use shift+tab to remove tabs. You can select multiple lines to shift them left and right.

Tab Override

Basic tabbing support with auto-indent.

Try out Tab Override on this textarea element. Use the tab key to add a tab character. Use shift+tab to remove tabs. You can select multiple lines to shift them left and right.

tabIndent.js

Try pressing the Esc key to disable tabIndent.js.

Try out tabIndent.js on this textarea element. Use the tab key to add a tab character. Use shift+tab to remove tabs. You can select multiple lines to shift them left and right.

Behave.js

Try out auto-completion by typing "(" or "{". Auto-indent is determined by code blocks.

Try out Behave.js on this textarea element. Use the tab key to add a tab character. Use shift+tab to remove tabs. You can select multiple lines to shift them left and right.

Summary

Tabby works well for basic tabbing, but is a little buggy in newer browsers (Shift+Tab is broken). However, considering it's the only library with a dependency and is no longer actively maintained, the other libraries seem like better choices. Use Tab Override if you need to support IE 6-8, are using a (AMD/CommonJS) module loader, are using jQuery, or want to use a key other than Tab for tabbing. Use tabIndent.js if you like the built-in usability enhancements such as delayed activation, Esc key to disable, and textarea styling. Use Behave.js if you want more than basic tabbing support, such as auto-completion, smarter auto-indent, etc., or need to set different options for each textarea on a page.