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 it was created for, so it can modify the field's size when it is invoked.

In practice, when a key is pressed on a certain field, the corresponding textareaKeydown function gets called. It inspects the keyboard event, and if the right keyboard combination is pressed, it modifies the number of available columns or rows for the field. We also scroll the browser viewport so that the newly resized <textarea> element is still completely visible.

Tip

Functions in JavaScript can be returned like any other object. But function objects are a bit special, in that they keep a reference to the context in which they were created. When a function is created and returned, it captures the local variables or local scope that it could "see" when it was created. A function object that remembers the context in which it was created is called a closure. This capability is key to understanding event handling and, more generally, methods that use callbacks.

Save the following user script as textarea-resize.user.js:

	// ==UserScript==
	// @name			Textarea Resize
	// @namespace		http://blog.monstuff.com/archives/cat_greasemonkey.html
	// @description		Provides keyboard shortcuts for resizing textareas
	// @include			*
	// ==/UserScript==

	// based on code by Julien Couvreur
	// and included here with his gracious permission

	var instrumentTextarea = function(textarea) {
		var centerTextarea = function() {
		  if (textarea.scrollIntoView) {
			  textarea.scrollIntoView(false);
		  } else {
			  textarea.wrappedJSObject.scrollIntoView(false);
		  }
	  };

	  var textareaKeydown = function(e) {
		if (e.shiftKey && e.ctrlKey && e.keyCode == 13) {
			// shift-ctrl-enter
			textarea.rows -= 1;
			centerTextarea();
		}
		else if (e.shiftKey && e.ctrlKey && e.keyCode == 32) {				  // shift-ctrl-space
			  textarea.cols -= 1;
			  centerTextarea();
		}
		else if (e.ctrlKey && e.keyCode == 13) {
			  // ctrl-enter
			  if (textarea.offsetHeight < window.innerHeight - 40) {
				  textarea.rows += 1;
			  }
			  centerTextarea();
		}
		else if (e.ctrlKey && e.keyCode == 32) {
			 // ctrl-space
			 if (textarea.offsetWidth < window.innerWidth - 40) {
			     textarea.cols += 1;
			 }
			 centerTextarea();
		}
	};
			  
	textarea.addEventListener("keydown", textareaKeydown, 0);
}
		 
var textareas = document.getElementsByTagName("textarea");
for (var i = 0; i < textareas.length; i++) {
   instrumentTextarea(textareas[i]);
}

Running the Hack

After installing the script (Tools → Install This User Script), navigate to a site that has a textarea that is too small for your taste. I'll use one at http://www.htmlcodetutorial.com/forms/_TEXTAREA.html as an example.

Start typing in the form, as shown in Figure 4-6. To add extra rows to the input field, press Ctrl-Enter. To expand it horizontally (adding columns), press Ctrl-spacebar.

Figure 4-7 illustrates an expanded textarea. The script allows you to increase the size of the field even more, up to the size of your browser window. It also scrolls the page to bring the entire textarea into view, as needed.

If you want to shrink the textarea instead, use Shift-Ctrl-Enter and Shift-Ctrl-spacebar.

—Julien Couvreur