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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > selectionStart (input, textarea, ...)

selectionStart property (input, textarea, ...)

Browser support:

9

Specifies or returns the start position of the selected text within the current element.

To retrieve the end position, use the selectionEnd property. When the values of the selectionStart and selectionEnd properties are the same, no text is selected.

The selectionStart property is supported in Internet Explorer from version 9. In older Internet Explorer versions, use the createRange method of the selection object to retrieve the selection within the document and use the createTextRange method to select a part of the text content within an element. See the example below for details.

If you need the selected content in the entire document, use the getSelection method in Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9.

Syntax:

object.selectionStart;

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

This property is read/write.

Possible values:

Zero-based Integer that specifies or retrieves the start position of the selection, in characters.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the selectionStart property:

<head>
    <script type="text/javascript">
        function Select () {
            var input = document.getElementById ("myText");
            if ('selectionStart' in input) {
                input.selectionStart = 1;
                input.selectionEnd = 2;
                input.focus ();
            }
            else {  // Internet Explorer before version 9
                var inputRange = input.createTextRange ();
                inputRange.moveStart ("character", 1);
                inputRange.collapse ();
                inputRange.moveEnd ("character", 1);
                inputRange.select ();
            }
        }
    </script>
</head>
<body>
    <input type="text" id="myText" value="Some text for testing"/>
    <button onclick="Select ()">Select the second character!</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 getSelection method and the selectionStart and selectionEnd properties to receive the text content of the current selection:

<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;
                }
            }
            if (selText !== "") {
                alert (selText);
            }
        }
    </script>
</head>
<body onmouseup="GetSelectedText ()">
    Some text for selection.
    <br /><br />
    <textarea>Some text in a textarea element.</textarea>
    <input type="text" value="Some text in an input field." size="40"/>
    <br /><br />
    Select some content on this page!
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to get the selected text in a textarea element:

<head>
    <script type="text/javascript">
        function GetSelection () {
            var selection = "";

            var textarea = document.getElementById("myArea");
            if ('selectionStart' in textarea) {
                    // check whether some text is selected in the textarea
                if (textarea.selectionStart != textarea.selectionEnd) {
                    selection = textarea.value.substring  (textarea.selectionStart, textarea.selectionEnd);
                }
            }
            else {  // Internet Explorer before version 9
                    // create a range from the current selection
                var textRange = document.selection.createRange ();
                    // check whether the selection is within the textarea
                var rangeParent = textRange.parentElement ();
                if (rangeParent === textarea) {
                    selection = textRange.text;

                }
            }

            if (selection == "") {
                alert ("No text is selected.");
            }
            else {
                alert ("The current selection is: " + selection);
            }
        }
    </script>
</head>
<body>
    <textarea id="myArea" spellcheck="false">Select some text within this field.</textarea>
    <button onclick="GetSelection ()">Get the current selection</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example shows how to modify the selected text in a textarea element:

<head>
    <script type="text/javascript">
        function ModifySelection () {
            var textarea = document.getElementById("myArea");
            if ('selectionStart' in textarea) {
                    // check whether some text is selected in the textarea
                if (textarea.selectionStart != textarea.selectionEnd) {
                    var newText = textarea.value.substring (0, textarea.selectionStart) + 
                        "[start]" + textarea.value.substring  (textarea.selectionStart, textarea.selectionEnd) + "[end]" +
                        textarea.value.substring (textarea.selectionEnd);
                    textarea.value = newText;
                }
            }
            else {  // Internet Explorer before version 9
                    // create a range from the current selection
                var textRange = document.selection.createRange ();
                    // check whether the selection is within the textarea
                var rangeParent = textRange.parentElement ();
                if (rangeParent === textarea) {
                    textRange.text = "[start]" + textRange.text + "[end]";
                }
            }
        }
    </script>
</head>
<body>
    <textarea id="myArea" cols="30" spellcheck="false">Select some text within this field.</textarea>
    <button onclick="ModifySelection ()">Modify the current selection</button>
</body>