Why doesn't the document.execCommand work when I click on a div?

Question

Both the button and the div have the same 'onclick' code, yet the execCommand only seems to work on the button. Is there any way I can make it work when pressing the div?

Here's my fiddle: http://jsfiddle.net/foreyez/ZzL8y/

<button onclick="document.execCommand('bold',false,null);">Bold</button>
<div onclick="document.execCommand('bold',false,null);" style='border:1px solid black;width:50px;'>Bold</div>

<div id='input' contenteditable='true'>
    select some of this text and then hit one of the buttons above
</div>

Im guessing it doesn't work with the div because you lose focus and selection. With the button the focus is kept. — DeadAlready, Sep 21 '12 at 06:38

score 29 · Accepted Answer · answered Sep 21 '12 at 06:51

29

You need to prevent the mousedown event on your div because it steals the focus:

Updated fiddle

answered Sep 21 '12 at 06:51

Konstantin Dinev

34,219
14
75
100

brilliant konstantin! – oldboy Nov 09 '17 at 05:43

score 1 · Answer 2 · edited May 23 '17 at 11:55

1

See this fiddle :- http://jsfiddle.net/ZzL8y/4/
This is not the complete answer but these links might help you:-

1> set execcommand just for a div

2> select all text in contenteditable div when it focus/click

edited May 23 '17 at 11:55

Community

1
1

answered Sep 21 '12 at 06:46

Pranav

8,563
4
26
42

score 0 · Answer 3 · answered Mar 07 '18 at 21:18

0

For Firefox, it's necessary to set contenteditable = true before execCommand.

For IE it is not necessary.

answered Mar 07 '18 at 21:18

Bernardo Meyer

1

Why doesn't the document.execCommand work when I click on a div?

3 Answers3

Linked