Entering Tabs in Web Forms
by Castwide on 11-21-2008 • Tags: code, javascript, prototype, tabentry • 0 commentsThe typical behavior of the tab key in browsers is to move focus to the next selectable element. It makes sense in most scenarios; but sometimes—for example, when you're writing code in a textarea element—you might want to indent your text instead. Here is some JavaScript that makes it possible to change the behavior of the tab key.
In the following demonstration, clicking the checkbox will cause the tab key to insert tab characters in the textarea.
You can make indentation work without requiring the user to click a checkbox, but I generally like to make features optional when they change the behavior that users may have grown to expect.
The main JavaScript file is tabentry.js. It uses the Prototype framework for cross-browser event handling, among other features. It also uses the SelectionRange library, a useful collection of methods that provide simple cross-browser text range management.