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 ?

Answer 1

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

Answer 2

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