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

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

oncontrolselect event | controlselect event

Browser support:

Occurs before a control is selected in an editable region.

An editable region can be specified with the contentEditable and designMode properties. To get the selected controls in an editable region, use the createRange and createRangeCollection methods. For further details, please see the pages for the mentioned properties and methods.

How to register:

In HTML:

In JavaScript:

object.oncontrolselect = handler;

object.attachEvent ("oncontrolselect", 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	Yes
Cancelable	Yes
Event object	-

Actions that invoke the oncontrolselect event:

Clicking on a control element in an editable region.

Example HTML code 1:

This example illustrates the use of the oncontrolselect event:

<head>
    <script type="text/javascript">
        function Init () {
                // the 'multipleSelection' command throws an exception in Opera
            try {
                    // enables multiple selection in Internet Explorer
                document.execCommand("multipleSelection", false, true);
            }
            catch (e) {};
        }

        function OnBeforeControlSelected () {           
            var controlRange = document.selection.createRange ();
            if (controlRange.length >= 2) {
                alert ("At most two buttons can be selected!");
                return false;   // cancels the default action
            }
            return true;
        }
    </script>
</head>
<body onload="Init ();">
    Try to select all buttons in the field below.<br />
    You can select a button by clicking on it.<br />
    Hold down the CTRL or SHIFT key for multiple selection.
    <br /><br />
    <div contenteditable="true" style="background-color:#a0e0e0;" oncontrolselect="return OnBeforeControlSelected ()">
        <button>First button</button><br />
        <button>Second button</button><br />
        <button>Third button</button>
    </div>
</body>