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

You are here: Reference > JavaScript > client-side > selection and ranges > methods > createControlRange (body)

createControlRange method (body)

Browser support:

Creates an empty controlRange collection.

When the new controlRange collection is created, use the add and addElement methods to build its contents. For detailed information, please see the page for the controlRange collection.

Syntax:

object.createControlRange ( );

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

Return value:

Returns the newly created controlRange object

Example HTML code 1:

This example illustrates the use of the createControlRange method:

<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 SelectButtons () {
            var editor = document.getElementById ("editor");
            if (editor.createControlRange) {        //Internet Explorer
                var buttons = editor.getElementsByTagName ("button");

                var controlRange = editor.createControlRange ();
                for (var i = 0; i < buttons.length; i++) {
                    controlRange.add (buttons[i]);
                }

                controlRange.select ();
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body onload="Init ();">
    <div id="editor" contenteditable="true" style="background-color:#e0f0e0;">
        <button>Sample button</button>
        <br /><br />Sample text inside the editor.<br /><br />
        <button>Another button</button>
    </div>
    <br /><br />Click on the button below to select all buttons inside the editor.<br /><br />
    <button onclick="SelectButtons ();">Select all buttons inside the editor!</button>
</body>