Javascript RTF编辑器，单击按钮后，内容可编辑区域失去焦点

Question

我有简单的javascript RTF编辑器，仅包含具有以下onclick的粗体按钮：

  document.execCommand('bold', false)

和简单的html ...

<div contenteditable="true">

我的问题是，当我单击粗体按钮时，文本区域失去了焦点，是否有解决方案？

Answer 1

好吧，焦点移到了按钮上，因此您需要取消单击操作，以使焦点不会丢失到内容可编辑元素中。

 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

答案更新

查看此答案，您可以保存和还原当前contenteditable的位置，将blur事件侦听器添加到contenteditable

一个例子：

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