In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > onselect

onselect event | select event

Browser support:

Occurs after some text has been selected in an element.

Use the onselect event on the textarea, input:password and input:text elements for cross-browser functionality. Support for the onselect event on other elements is browser-dependent.

To get the current selection within the document, use the window.getSelection method and the selection object.

If you want to disable the selection for an element or for the entire document, use the unselectable property in Internet Explorer and Opera and the MozUserSelect and webkitUserSelect style properties in Firefox, Google Chrome and Safari.

How to register:

In HTML:

In JavaScript:

object.onselect = handler;

object.addEventListener ("select", handler, useCapture);

9

object.attachEvent ("onselect", handler);

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles

Cancelable

Yes

Event object

UIEvent

9

Event

Actions that invoke the onselect event:

Selecting some text.
Changing the selection by script (select method, selectionStart and selectionEnd properties or through the selection or selectionRange objects).

The order of events related to the onselect event:

Example HTML code 1:

This example illustrates the use of the onselect event:

<head>
    <script type="text/javascript">
        function GetSelectedText () {
            var selText = "";
            if (window.getSelection) {  // all browsers, except IE before version 9
                if (document.activeElement && 
                        (document.activeElement.tagName.toLowerCase () == "textarea" || 
                         document.activeElement.tagName.toLowerCase () == "input")) 
                {
                    var text = document.activeElement.value;
                    selText = text.substring (document.activeElement.selectionStart, 
                                              document.activeElement.selectionEnd);
                }
                else {
                    var selRange = window.getSelection ();
                    selText = selRange.toString ();
                }
            } 
            else {
                if (document.selection.createRange) {       // Internet Explorer
                    var range = document.selection.createRange ();
                    selText = range.text;
                }
            }
            return selText;
        }

        function OnSelectInput (input) {
            selText = GetSelectedText ();
            alert ("The contents of the current selection are\n" + selText);
        }
    </script>
</head>
<body>
    <input size="40" value="Select a part of this text!" onselect="OnSelectInput (this)">
</body>