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

You are here: Reference > JavaScript > client-side > selection and ranges > properties > type (selection)

type property (selection)

Browser support:


		10.5

Returns a string value that identifies the content type of the current selection.

Note: the support for the selection object and its type property has been removed in Opera 10.5.

You can access the currently selected contents in the document through the selection object.

Depending on the type of the current selection, the createRange or createRangeCollection method can be used to retrieve an object that represents the current selection. When the selection is in a contentEditable element, then it can contain elements, otherwise it contains text.

Accordingly, the createRange method returns a controlRange collection when the selection contains elements and returns a TextRange object in other cases. Similarly, the createRangeCollection method returns a controlRange collection when the selection contains elements and returns a TextRanges collection in other cases. For further details, see the page for the mentioned ranges.

Syntax:

object.type;

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

This property is read-only.

Possible values:

String that represents the type of selection.

One of the following values:

Control

The selection contains elements.

None

There is no selection or the selected content is not available.

Text

The selection contains text only.

Default: this property has no default value.

Example HTML code 1:

This example illustrates a cross-browser solution to get the selected content in the document:

<head>
    <script type="text/javascript">
        function TestSelection () {
            if (window.getSelection) {  // all browsers, except IE before version 9
                var selectionRange = window.getSelection ();                                        
                alert ("The text content of the selection:\n" + selectionRange.toString ());
            } 
            else {
                if (document.selection.type == 'None') {
                    alert ("No content is selected, or the selected content is not available!");
                }
                else {
                    var textRange = document.selection.createRange ();
                    alert ("The text content of the selection:\n" + textRange.text);
                }
            }
        }
    </script>
</head>
<body>
    Select some text or <button>element</button>, or do not select anything, before you click on the button below.
    <br /><br />
    <button onclick="TestSelection ();">Test the selection!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the type property for selected controls:

<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>