Last updated 13 July 2008. Created on 13 July 2008.
Edited by efolia. Log in to edit this page.

Note that the following technique assumes that you are developing your own module and that you are familiar with the basics of Drupal's Form API.

A Select All button offers a link that allows the user to instantly select the entire content of a "textarea" field in a form. Adding such a button or link insures that the user will grab the entire content of a given field before copying it to the clipboard. It provides added UI functionality to your application in cases where you need to distribute code, lists or other text-based snippets of data through a browser interface.

First, you will need to create a field of type "textarea." The following code defines a 50-column wide, 10-row high textarea field named "my_textarea":

$form = array();
$form['my_textarea'] = array(
  '#type' => 'textarea', 
  '#title' => 'My textarea',
  '#description' => 'This is an XHTML textarea', 
  '#cols' => 50, 
  '#rows' => 10,

Drupal will output the field to the client's browser wrapped in an textarea element with an id that corresponds to the keyname of the field prefixed with "edit-". For instance:

<textarea cols="50" rows="10" name="my_textarea" id="edit-my_textarea"  class="form-textarea resizable">
My content

The textarea id will be used by the JavaScript function (described below) to select the entire content of the field.

Next, you need to define the "Select All" button:

$form['my_selectall_button'] = array(
  '#type' => 'button', 
  '#description' => 'This button selects the entire content of the my_textarea field',
  '#value' => 'Select All', 
  '#attributes' => array('onclick' => 'selectall("edit-my_textarea");return(false);'), 

The "#attributes" property added to the "Select All" button traps the mouse click event and calls the "selectall" javascript function with the specific ID of the selectable textarea as parameter. Since there is no need for Drupal to process the values of the form at this point, it also returns "false" to insure that the click event does not post the form back to the server.

Finally, include the following function in your own JavaScript library (or create a new one if you do not already use one) using drupal_add_js. This function selects the content of the textarea and sets the focus on it, leaving it to the user to copy the selected content to the clipboard.

// JavaScript Document
// adapted from
function selectall(areaid) {
	var area_id = areaid;
	var sharp_id = "#" + area_id;
	var textarea = document.getElementById(area_id);
    var iStart = 0;
    var iLength = $(sharp_id).val().length;
    if (textarea.createTextRange)
        var xRange = textarea.createTextRange();
        xRange.moveStart("character", iStart);
        xRange.moveEnd("character", iLength);;
    } else if (textarea.setSelectionRange)
        textarea.setSelectionRange(iStart, iLength);

Assuming for instance that the JavaScript code is saved in a file called "selectall.js" located in the root directory of your module's folder, you can include the JavaScript function using a line similar to this one in your hook_init section (i.e., in the my_module_init function).

drupal_add_js(drupal_get_path('module', 'my_module') .'/selectall.js', 'module');

The Select All button technique described above easily integrates with Drupal and works across all versions of popular browsers and operating systems. In an environment where JavaScript is disabled, it simply does nothing. Note that this implementation does not take care of copying the content of the textarea to the user's clipboard. There are several reasons to avoid using a "Copy to clipboard" button:

  1. Overriding the user's clipboard is generally not considered a good or even safe practice.
  2. Copying and pasting to and from the clipboard is a very simple operation and should be familiar to the user. Where it is not so familiar, the added functionality would simply be useless.
  3. The techniques used to copy a value to the clipboard using JavaScript in a non-IE environment typically rely on Adobe Flash to override the clipboard functions. These techniques do not work equally well across all browsers and operating systems. Furthermore, there is no guarantee that clipboard overriding will work in future versions of the popular browsers, including the upcoming version of Microsoft's own IE.

Looking for support? Visit the forums, or join #drupal-support in IRC.