Why getting a text selection from textarea works when a button clicked but not when a "div" clicked (in Internet Explorer)

Question

Consider the following code: (Live demo here - Open in Internet Explorer 7 or 9)

HTML:

<textarea>Hello Stack Overflow</textarea>
<input class="a" type="button" value="Click here does the job" />
<div class="a">But clicking here not :(</div>

JS:

    function getInputSelection(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;
                }
            }
        }
    }

    return {start: start, end: end};
}


function getselection() {
  var selectedText = getInputSelection($("textarea")[0]);
  var start = selectedText.start;
  var end = selectedText.end;
  alert("Start: " + start + ", End: " + end);
}

$(".a").click(getselection);

The getInputSelection() function is taken from here.

For some reason, when the <div> is clicked, the result is always:

Start: 0, End: 0

Any ideas how to fix that ?

Using jsfiddle it seems both of them don't really work: http://jsfiddle.net/nayish/cKt8e/ — Nachshon Schwartz, Aug 25 '11 at 12:51
You have to select some text (or move the cursor) in the textarea, and then to click the element. — Misha Moroshko, Aug 25 '11 at 13:00
In that case it works fine by me, what browser are you running this on? I'm running it on chrome. — Nachshon Schwartz, Aug 25 '11 at 13:03

score 4 · Accepted Answer · answered Aug 25 '11 at 13:15

4

The problem is that clicking the <div> loses the focus on the textarea before the getInputSelection() function executes. There are two alternatives:

Either use the mousedown event instead: http://jsfiddle.net/RbSLw/13/, or
Make the <div> unselectable (done by adding a unselectable="on" attribute in IE): http://jsfiddle.net/RbSLw/14/.

answered Aug 25 '11 at 13:15

Tim Down

318,141
75
454
536

@Misha: One caveat with `unselectable`: it only applies to that element and not to child elements. See http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting/4358620#4358620 – Tim Down Aug 25 '11 at 14:18
thanks, your answer helped a lot. thanks. I have no idea where you got this knowledge from) – nowiko Jun 23 '17 at 07:48

score 2 · Answer 2 · answered Aug 25 '11 at 13:12

Your problem is caused by explorer. When you click on a button the focus is not lost from the input field but when you click on the div it removed and hence the selected text is no longer selected.

What you want to do is find a way to overcome this by forcing clicking on a div to not remove the focus from the input.

You may be better off simply saving the start and end values everytime they change and this way when you click them it won't matter if it is selected or not.

Hope this helped :)

Why getting a text selection from textarea works when a button clicked but not when a "div" clicked (in Internet Explorer)

2 Answers2

Linked