Monthly Archives: May 2013

Comparison of JS Libraries for Textarea Tabbing

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:

Continue reading