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

Question

Both buttons and div have the same onclick code, but execCommand only works on the button. Is there any way to make it work when I click div?

Here is 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> 

Answer 1

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

Updated fiddle

Answer 2

See this script: - http://jsfiddle.net/ZzL8y/4/
This is not a complete answer, but these links may help you: -

1> install execcommand for div only

2> select all the text in the contenteditable div when it focuses / clicks

Answer 3

For Firefox, set contenteditable = true before execCommand.

For IE is not necessary.