JavaScript: Tutorial - A Guide to JavaScript - Page 19

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().

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");

Comment