Greasemonkey Hacks

Hack #34. Resize Text Input Fields with the Keyboard

Give yourself some more room to type in web forms.

Many sites now incorporate contributions from users, in the form of feedback, comments, or even direct editing. But the textarea experience can be pretty frustrating, in part, because the fields are often too small. Short of breaking out of the box entirely, this user script tries to relax that limitation. It allows you to stretch the boundaries of your input workspace.

Making web forms resizable can be implemented in different ways. One way lets you drag and drop the corner and sides of a textarea to resize them. Another method, illustrated in "Add a Text-Sizing Toolbar to Web Forms" [Hack #75] , is to add zoom in and zoom out buttons on top of textareas.

One thing I didn't like about these solutions is that they interrupt my typing. They force my hand to move away from the keyboard. Instead, this hack makes use of keyboard shortcuts to do the resizing. For example, it lets you expand textareas vertically by pressing Ctrl-Enter, and horizontally by pressing Ctrl-spacebar.

The Code

This user script runs on all pages. It uses document.getElementsByTagName to list all the <textarea> elements and then instruments them. This consists of defining two helper methods for each <textarea> and wiring the field's keydown event to an event handler.

When a textarea is instrumented, the new helper functions that are created reference the textarea. Each function thus keeps access to the textarea ...