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:

Hello Stack Overflow


        

Answer 1

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

Answer 2

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