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:
<ELEMENT onselect="handler">

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 No
Cancelable Yes
Event object
UIEvent
9
Event

Actions that invoke the onselect event:

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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content