Select Box Scripting
Select boxes are created by using the
<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.
type property for a select box is either "select-one" or "select-multiple", depending on
the absence or presence of the HTML
<option> element is represented in the DOM by an HTML
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
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
Rich Text Editing
Rich text is text that has HTML markup code in it. Such as
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
"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
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
|COMMAND||VALUE (THIRD ARGUMENT)||DESCRIPTION|
|backcolor||A color string||Sets the background color of the document.|
|bold||null||Toggles bold text for the text selection.|
|copy||null||Executes a clipboard copy on the text selection.|
|createlink||A URI string||Turns the current text selection into a link thatgoes to the given URI.|
|cut||null||Executes a clipboard cut on the text selection.|
|delete||null||Deletes the currently selected text.|
|fontname||The font name||Changes the text selection to use the given font name.|
|fontsize||1 through 7||Changes the font size for the text selection.|
|forecolor||A color string||Changes the text color for the text selection.|
|formatblock||The HTML tag to surround the block with; for example, <h1>||Formats the entire text box around the selection with a particular HTML tag.|
|indent||null||Indents the text.|
|inserthorizontalrule||null||Inserts an <hr> element at the caret location.|
|insertimage||The image URI||Inserts an image at the caret location.|
|insertorderedlist||null||Inserts an <ol> element at the caret location.|
|insertparagraph||null||Inserts a <p> element at the caret location.|
|insertunorderedlist||null||Inserts a <ul> element at the caret location.|
|italic||null||Toggles italic text for the text selection.|
|justifycenter||null||Centers the block of text in which the caret is positioned.|
|justifyleft||null||Left-aligns the block of text in which the caret is positioned.|
|outdent||null||Outdents the text.|
|paste||null||Executes a clipboard paste on the text selection.|
|removeformat||null||Removes block formatting from the block in which the caret is positioned. This is the opposite of formatblock.|
|selectall||null||Selects all of the text in the document.|
|underline||null||Toggles underlined text for the text selection.|
|unlink||null||Removes a text link. This is the opposite of createlink.|
innerHTML method to retrieve the HTML text that the user entered.
There are some other methods related to commands. The first is
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.document.queryCommandEnabled("bold");
This code returns true if the "bold" command can be executed on the current selection.
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.document.queryCommandState("bold");
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.document.queryCommandValue("fontsize");