How to get range of selected text of textarea in JavaScript - Stack Overflow

admin管理员组

文章数量:1202004

I am trying to retrieve/find the start point and end point of selection in textarea.

Here is my code which work fine in Mozilla and chrome, but it is not working in Internet Explorer 9:

<script type="txt/javascript">
    function update(o) {

        var t = o.value, s = getSelectionStart(o), e = getSelectionEnd(o);
        alert("start: " + s + " End: " + e);
    }

    function getSelectionStart(o) {
        if (o.createTextRange) {
            var r = document.selection.createRange().duplicate()
            rse = r.text.length;
            r.moveEnd('character', o.value.length)
            if (r.text == '')
                return o.value.length
            return o.value.lastIndexOf(r.text)
        }
        else
            return o.selectionStart
    }

    function getSelectionEnd(o) {
        if (o.createTextRange) {
            var r = document.selection.createRang;
            e().duplicate()
            r.moveStart('character', -o.value.length)
            return r.text.length
        }
        else
            return o.selectionEnd
    }
</script>

<textarea id ="text" rows=10 cols="50" onselect="update(this);"></textarea>

When I test this code in Mozilla and Chrome, it gives me correct answer, but when I run this code in Internet Explorer 9, it shows -1 for start and any value for end.

I want to just find out the start and end point/index of the selected text of the textarea. Actually, the above code works fine for a textbox in all browsers, but not with textarea.

How can I fix it?

I am trying to retrieve/find the start point and end point of selection in textarea.

Here is my code which work fine in Mozilla and chrome, but it is not working in Internet Explorer 9:

<script type="txt/javascript">
    function update(o) {

        var t = o.value, s = getSelectionStart(o), e = getSelectionEnd(o);
        alert("start: " + s + " End: " + e);
    }

    function getSelectionStart(o) {
        if (o.createTextRange) {
            var r = document.selection.createRange().duplicate()
            rse = r.text.length;
            r.moveEnd('character', o.value.length)
            if (r.text == '')
                return o.value.length
            return o.value.lastIndexOf(r.text)
        }
        else
            return o.selectionStart
    }

    function getSelectionEnd(o) {
        if (o.createTextRange) {
            var r = document.selection.createRang;
            e().duplicate()
            r.moveStart('character', -o.value.length)
            return r.text.length
        }
        else
            return o.selectionEnd
    }
</script>

<textarea id ="text" rows=10 cols="50" onselect="update(this);"></textarea>

When I test this code in Mozilla and Chrome, it gives me correct answer, but when I run this code in Internet Explorer 9, it shows -1 for start and any value for end.

I want to just find out the start and end point/index of the selected text of the textarea. Actually, the above code works fine for a textbox in all browsers, but not with textarea.

How can I fix it?

• javascript
• textarea

Share Improve this question Follow edited May 9, 2022 at 14:07 Peter Mortensen 31.6k2222 gold badges109109 silver badges133133 bronze badges asked Aug 30, 2012 at 9:46 user1619672user1619672 26911 gold badge77 silver badges1515 bronze badges 1

• Probably missing doctype declaration or missing X-UA Compatible, or both. Though getSelectionEnd() won't work in any browser, there's a typo, maybe just in the post only? – Teemu Commented Aug 30, 2012 at 10:14

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 10

Use the code below or check this fiddle

   function getTextSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }
    alert("start :" + start + " End :" + end);
}

While the original answer may have helped the OP in 2012, things have changed, and this has now become simpler, at least in modern browsers.

---

You can use the JavaScript selectionStart and selectionEnd attributes of the textarea.

Basic Usage

These are both standard attributes that will work in today's major browsers (Chrome, Safari, Firefox, Opera, Edge, and IE).

For example:

console.log(
    document.getElementById("text").selectionStart,
    document.getElementById("text").selectionEnd
)

will show both the start and end point of the selection in the textarea with the ID text.

Boundary Cases

If there is no item selected in the textarea, then both the start and end attributes will return the last position of the caret. If the textarea has not received focus yet, the attributes will both return a value of 0.

Changing the Selection

By setting these attributes to new values, you will adjust the active text selection. Thus, you can also use this to select text in a textarea.

Checking if a selection is in place

You can check if there is currently a selection by checking if the values are both different, i.e. if

document.getElementById("text").selectionStart != document.getElementById("text").selectionEnd

is true, then there is a text selection.

Demo

const textarea = document.getElementById("text");
const selStart = document.getElementById("selStart");
const selEnd = document.getElementById("selEnd");

// should maybe also look at other events, e.g. "keydown", "select", etc
textarea.addEventListener("mousemove", () => {
  selStart.innerText = textarea.selectionStart;
  selEnd.innerText = textarea.selectionEnd;
});

<textarea id="text">Some text here</textarea>

<p>Selection Start: <span id="selStart">0</span></p>
<p>Selection End: <span id="selEnd">0</span></p>

References

• Live Demo (JSFiddle)
• Documentation at MDN
• Documentation at MSDN

本文标签： How to get range of selected text of textarea in JavaScriptStack Overflow