controlRange collection
Represents a collection of controls. A control can be a button, select, textarea, one of the input elements or an arbitrary element in contentEditable mode.
There are two ways to get a controlRange collection:
- The createControlRange method creates an empty controlRange collection. Use the add and addElement methods to build its contents. See Example 1 for details.
-
In Internet Explorer, control elements in editable regions (see the contentEditable and designMode properties) are selectable.
The createRange and createRangeCollection methods of the selection object provide access to the contents of the current selection.
The type of the objects returned by the createRange and createRangeCollection methods depends on the type of the selection. You can get the type of the selection with the type property of the selection object. When the value of the type property is 'Control', the createRange and createRangeCollection methods return a controlRange collection. See Example 2 for details.
Syntax:
Methods that return the object:
| • | body.createControlRange ( ) |
| • | selection.createRange ( ) |
| • | selection.createRangeCollection ( ) |
Possible members:
Properties:
|
Returns an integer that specifies the number of objects in the current collection.
This property is read-only. |
Methods:
| add (control) |
Inserts a control into the current collection at the last position.
This method is identical to the addElement method.
Parameters:
Return value:
This method has no return value.
|
||||||||||||||
| addElement | Inserts a control into the controlRange collection at the last position. | ||||||||||||||
| execCommand | Allows running commands on certain objects. | ||||||||||||||
| item (index) |
Returns an object from the controlRange collection.
Parameters:
Return value:
The element at the specified position, or null
|
||||||||||||||
| queryCommandEnabled | Returns whether the execution of the specified command can be successful, using the execCommand method. | ||||||||||||||
| queryCommandIndeterm | Returns whether the specified command is in an indeterminate state. | ||||||||||||||
| queryCommandState | Returns the current state of the specified command. | ||||||||||||||
| queryCommandSupported | Returns whether the specified command is supported by the current object. | ||||||||||||||
| queryCommandText | Returns the description of the specified command. | ||||||||||||||
| queryCommandValue | Returns the actual value of the specified command. | ||||||||||||||
| remove (index) |
Removes a control from the current collection by index.
Parameters:
Return value:
This method has no return value.
|
||||||||||||||
| scrollIntoView | Scrolls the specified element into the visible area of the document. | ||||||||||||||
| select | Selects all text or controls that is included in the current TextRange or controlRange object. |
Example HTML code 1:
This example illustrates the use of the controlRange collection via 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 with the controlRange collection.<br /><br /> <button onclick="SelectButtons ();">Select all buttons inside the editor!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 2:
This example creates a controlRange collection from the current selection:
|
|
||||
<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 TestSelection () { if (document.selection === undefined || document.selection.type === undefined) { alert ("Your browser does not support this example!"); return; } if (document.selection.type == "Control") { var controlRange = document.selection.createRange (); alert ("There are " + controlRange.length + " buttons selected."); for (var i = 0; i < controlRange.length; i++) { var button = controlRange.item (i); alert ("The label of the " + (i+1) + ". selected button: " + button.value); } } else { alert ("Please select some of the buttons or maybe the selection cannot contain controls in your browser!"); } } </script> </head> <body onload="Init ();"> Select some of the buttons in the field below and click on the 'Test Selection' button.<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;"> <button>First button</button><br /> <button>Second button</button><br /> <button>Third button</button> </div> <br /><br /> <button onclick="TestSelection ();">Test Selection</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
External links:
User Contributed Comments