JavaScript Tutorial

Select Box Scripting

Select boxes are created by using the <select> and <option> HTML elements. These elements provide the following properties and methods in addition to those that are available on all form fields:

  • add(newOption, relatedOption): Adds a new <option> element to the control before the related option.
  • multiple: A Boolean value indicating if multiple selections are allowed. It is equivalent to the HTML multiple attribute.
  • options: An HTMLCollection of <option> elements in the control.
  • remove(index): Removes the option in the given position.
  • selectedIndex: The zero-based index of the selected option or –1 if no options are selected. For select boxes that allow multiple selections, this is always the first option in the selection.
  • size: The number of rows visible in the select box. It is equivalent to the HTML size attribute.

The type property for a select box is either "select-one" or "select-multiple", depending on the absence or presence of the HTML multiple attribute.

Each <option> element is represented in the DOM by an HTML <option> element object. This object adds the following properties for easier data access:

  • index — The index of the option inside the options collection.
  • label — The label of the option. This is equivalent to the HTML label attribute.
  • selected — A Boolean value used to indicate if the option is selected. Set this property to true to select an option.
  • text — The text of the option.
  • value — The value of the option (equivalent to the HTML value attribute).

Rich Text Editing

Rich text is text that has HTML markup code in it. Such as <i>, <b> and <u>.

Using contenteditable

The contenteditable attribute can be applied to any HTML element on a page and instantly makes that element editable by the user. Example:

<div id="richtext" contenteditable>This text can be edited by the user</div>

One can use the contentEditable in JavaScript to change the value. There are three values for contentEditable: "true" to turn on, "false" to turn off, or "inherit" to inherit the setting from a parent.

var div = document.getElementById("richtext");
div.contentEditable = "true";

Rich Text Interaction

The main way of interacting with a rich text editor is through the use of document.execCommand(). There are three possible arguments for document.execCommand(). On is the name of the command to execute; two is a Boolean value indicating if the browser should provide a user interface for the command (this should always be set to false to make it compatible with FireFox), and a value necessary for the command to work; null if necessary.

These are the commands for use with document.execCommand().

COMMAND VALUE (THIRD ARGUMENT) DESCRIPTION
backcolorA color stringSets the background color of the document.
boldnullToggles bold text for the text selection.
copynullExecutes a clipboard copy on the text selection.
createlinkA URI stringTurns the current text selection into a link thatgoes to the given URI.
cutnullExecutes a clipboard cut on the text selection.
deletenullDeletes the currently selected text.
fontnameThe font nameChanges the text selection to use the given font name.
fontsize1 through 7Changes the font size for the text selection.
forecolorA color stringChanges the text color for the text selection.
formatblockThe HTML tag to surround the block with; for example, <h1>Formats the entire text box around the selection with a particular HTML tag.
indentnullIndents the text.
inserthorizontalrulenullInserts an <hr> element at the caret location.
insertimageThe image URIInserts an image at the caret location.
insertorderedlistnullInserts an <ol> element at the caret location.
insertparagraphnullInserts a <p> element at the caret location.
insertunorderedlistnullInserts a <ul> element at the caret location.
italicnullToggles italic text for the text selection.
justifycenternullCenters the block of text in which the caret is positioned.
justifyleftnullLeft-aligns the block of text in which the caret is positioned.
outdentnullOutdents the text.
pastenullExecutes a clipboard paste on the text selection.
removeformatnullRemoves block formatting from the block in which the caret is positioned. This is the opposite of formatblock.
selectallnullSelects all of the text in the document.
underlinenullToggles underlined text for the text selection.
unlinknullRemoves a text link. This is the opposite of createlink.

Use the innerHTML method to retrieve the HTML text that the user entered.

There are some other methods related to commands. The first is queryCommandEnabled(), which determines if a command can be executed given the current text selection or caret position. This method accepts a single argument, the command name to check, and returns true if the command is allowed given the state of the editable area or false if not. Consider this:

var result = frames[0].document.queryCommandEnabled("bold");

This code returns true if the "bold" command can be executed on the current selection.

The queryCommandState() method lets you determine if a given command has been applied to the current text selection. For example, to determine if the text in the current selection is bold, you can use the following:

var isBold = frames[0].document.queryCommandState("bold");

The method queryCommandValue(), which is intended to return the value with which a command was executed. (The third argument in execCommand is in the earlier example.) For instance, a range of text that has the "fontsize" command applied with a value of 7 returns "7" from the following:

var fontSize = frames[0].document.queryCommandValue("fontsize");
<< < [Page 19 of 22] > >>