Keep selection made on editable DIV when focus is on other element

Question

I have had this problem for a long time and I just can't figure out how to fix it. I want to create a simple WYSYWYG editor and I have some problems.

Currently I have this:

<div id="editor" contenteditable="true"></div>
<input type="button" value="B" 
       onmousedown="document.execCommand('bold',false,null); return false;"/>

So, if I have some text inside my DIV, select it and click on "B" it is converted to BOLD, and remains selected, but this doesn't work on Opera and IE.

I just don't know how to make the editable DIV not only keep the focus but also the text selection.

Any idea?

On Opera, as long as I keep the mouse down, the selection is correctly kept, but when I release it, the text is unselected — ali, Sep 20 '12 at 20:40
Have you tried returning false from the `onclick` event too? — Todd Gibson, Sep 20 '12 at 21:09
Yes, I tried that too, also with onmouseup. The problem, on Opera and IE is that, as long as I maintain the mouse button pressed over the B button, the text is selected, but when I release the mouse button it is unselected. — ali, Sep 21 '12 at 11:23
@ali Hi, this is a little old question but I am wondering how you solved that ? I have the same issue with Opera ! — medBouzid, May 16 '16 at 22:58

score 3 · Answer 1 · answered Sep 21 '12 at 08:43

3

Two possible options are:

Use mousedown instead of click and prevent the default browser action: http://jsfiddle.net/dA9NK/
Make the button unselectable: http://jsfiddle.net/8hpvv/

answered Sep 21 '12 at 08:43

Tim Down

318,141
75
454
536

Thanks for your answer. Unfortunately, none of your scripts work on Opera. – ali Sep 21 '12 at 11:21
I had to use iframe to make it work on Opera. The problem now is that it doesn't work on IE anymore.This is almost funny – ali Sep 26 '12 at 14:33

Keep selection made on editable DIV when focus is on other element

1 Answers1

Linked