Javascript rich text editor, contenteditable area loses focus after button is clicked

Question

I have simple javascript rich text editor consiting only of bold button that has following onclick:

  document.execCommand('bold', false)

And simple html...

<div contenteditable="true">

My problem is that when I click the bold button, text area loses it's focus, is there some solution for that?

Answer 1

Well the focus moves to the button so you need to cancel the click action so the focus is not lost in the content editable element.

 document.querySelector(".actions").addEventListener("mousedown", function (e) { var action = e.target.dataset.action; if (action) { document.execCommand(action, false) //prevent button from actually getting focused e.preventDefault(); } }) 

 [contenteditable] { width: 300px; height: 300px; border: 1px solid black; } 

 <div class="actions"> <button data-action="bold">bold</button> <button data-action="italic">italic</button> </div> <div contenteditable="true"></div> 

Answer 2

ANSWER UPDATE

Taking a look to this answer you can save and restore current contenteditable position adding the blur event listener to your contenteditable

An example:

 // // restore position after click // document.getElementById('btn').addEventListener('click', function(e) { restoreSelection(cpos); }) // // save position on blur // document.querySelector('div[contenteditable="true"]').addEventListener('blur', function(e) { cpos = saveSelection(); }) function saveSelection() { if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { return sel.getRangeAt(0); } } else if (document.selection && document.selection.createRange) { return document.selection.createRange(); } return null; } function restoreSelection(range) { if (range) { if (window.getSelection) { sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (document.selection && range.select) { range.select(); } } } var cpos = -1; 

 <button id="btn">Make bold</button> <div contenteditable="true"> this is the text </div>