JavaScript Selections: Selection Events - Doc JavaScript | WebReference

JavaScript Selections: Selection Events - Doc JavaScript

Selection Events

Although Navigator 4.0x cannot retrieve the text of a selection within a text or textarea field, it can respond to one. Navigator 4.0x features the onselect event handler that executes JavaScript code when the user selects some of the text within a form's field. This event handler cannot be used for other elements on the page.

<INPUT TYPE="text" NAME="data" SIZE="30"
       onSelect="... statements here ...">

The onselect event handler is also supported by Internet Explorer 4.0x as an event handler of text and textarea fields. This event does not bubble like most other events in Internet Explorer 4.0x. Events that do not bubble can only be handled on the individual object that fired the event, so you cannot capture select events at the document level. See Column 10 for a complete discussion of Internet Explorer 4.0x's event model, and Column 11 for the cross-browser event model.

Internet Explorer 4.0x also supports the onselectstart event handler, which can be associated with any element on the page. This event fires as the mouse starts the selection of one or more elements. The element at the beginning of the selection fires the event. Since Navigator 4.0x doesn't support this event handler, it is useless. With the help of a script, it is possible to simulate the same behavior with Navigator 4.0x. Furthermore, Navigator 4.0x only supports text selections, so there is no meaning in determining what element generated the event. The best way to react to selections is the onmouseup event handler, which fires when the user releases the mouse button. By attaching a script to this event handler, it is possible to check if a selection has been made, and to react accordingly.

The onmouseup is supported by both fourth-generation browsers, so it is extremely useful. In Internet Explorer 4.0x, you can take advantage of the mouseup event to find the last element of the selection. The event object's srcElement property references this element. See Column 10 and Column 11 for more information on events and event handlers. The basic syntax for an event handler that automatically detects selections is as follows:

function detect(e) {
  // check if a selection exists
if (window.Event)
document.onmouseup = detect;

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