spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column12


The Selection Object

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

Internet Explorer 4.0x features a document.selection object which encapsulates a property and several methods that handle selections. The selection object provides information about the text and elements the user has currently highlighted with the mouse. This can be very useful if you want to perform some action based upon what the user has selected.

The selection object's type property defines the type of selection. This read-only string property can have one of the following values:

ValueDescription
"None"No selection or insertion point.
"Text"The selection is a text selection.
"Control"The selection is a control selection.

The default value is obviously "None", when there is no selection. Therefore, comparing the value of document.selection.type with "None" on Internet Explorer 4.0x, is equivalent to comparing the value returned by the document.getSelection() method with "" on Navigator 4.0x.

The selection object has three methods:

MethodDescription
clear()Clears the contents of the current selection.
empty()Deselects the current selection.
createRange()Creates a TextRange object for the selection.

Take a look at the following statement:

document.onmouseup = document.selection.clear;

If you embed this statement in a script, the browser deletes all selections. In other words, when the user selects a portion of the document, the browser immediately removes that portion. If the selection also consists of other non-text elements, they are removed in the same way. The page is rendered according to the new content. Notice that the clear() method is specified as clear (not clear()), because an event handler must be assigned a function reference (as opposed to a function call). Note that this script does not work on Navigator 4.0x because it takes advantage of the select object.

The empty() method simply deselects the current selection. A nice, but useless implementation of this method is to create a selection-free page:

document.onmouseup = document.selection.empty;

This statement instructs the browser to deactivate any existing selection. In other words, it un-highlights the selection. Note that the empty() method also scrolls the window to the top of the page. Therefore, the preceding statement scrolls the window to the top whenever you release the mouse button.

The createRange() method is very simple. It returns a TextRange object for the current selection. Here's an example:

var range = document.selection.createRange();

Handling the object and extracting its data is another story. We'll discuss that in the next section of this column. Just keep reading to find out how to use the new object, and how to write a function equivalent to Navigator 4.0x's built-in document.getSelection() method.

http://www.internet.com

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint


Created: January 29, 1998
Revised: January 29, 1998

URL: http://www.webreference.com/js/column12/selectionobject.html