从可编辑的 div 中移除焦点

Question

如果我通过编程方式移除内容可编辑 DIV 的焦点，它看起来就好像没有焦点，但如果用户开始输入，则仍具有焦点。

$("#myContentEditable").focus();
$("#myContentEditable").blur();

如果你开始打字，它仍然有焦点。这在文本输入框中不会发生。有任何想法如何实际移除焦点？我想我可以给另一个文本输入框焦点，但我必须即时创建、聚焦并销毁它。这至少有点瑕疵...请参考https://jsfiddle.net/zvn4w61d/。

- Matt Bryson

---

你能分享一下你想要的完整代码块吗？ - user3497034

实际的代码很复杂，但我们有一个CK编辑器实例，当它关闭时，我希望能够捕获用户按下箭头键的动作，以便我们可以移动包含CK的div。然而，我不能释放DIV的焦点，所以按上箭头键会重新打开CK，因为它重新聚焦到可编辑的div上。我会添加一个更完整的JS fiddle...... - Matt Bryson

Answer 1

您可以使用表示用户选择的文本范围或插入符号的当前位置的选择对象，结合 removeAllRanges 来从选择中移除所有范围：

window.getSelection().removeAllRanges();

演示

- Milind Anantwar

---

太棒了，这正是我所需要的。干杯！ - Matt Bryson

Answer 2

将以下代码添加到您的主JavaScript文件中，所有可编辑组件都将正常工作。

$(function(){
   $(document).on('mousedown', '[contenteditable]', function(e){
  $(this).attr('contenteditable', true);
  $(this).focus();
 });

 $(document).on('blur', '[contenteditable]', function(e){
  $(this).attr('contenteditable', false);
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div contenteditable>This is a content editable div that the blur really works</div>

- Ricardo Azzi Silva

Answer 3

你可以通过 CSS 来实现这个功能。

试试这个。

#myContentEditable:read-write:focus {
     outline: none;
}

这里演示

- Shrinivas Pai

---

我认为你误解了所提出的问题。 - brenjt