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?

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?

• javascript
• html
• contenteditable

• 1 well that is because the focus moves to the button.... cancel the action. If you showed your click event, I could show you a solution. – epascarello Commented Sep 5, 2017 at 14:20

2 Answers 2

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