Question

如果我以编程方式删除内容可编辑div的焦点，则看起来就像它没有焦点一样，但如果用户输入它仍然具有焦点。

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

如果您随后开始输入，它仍然具有焦点。

https://jsfiddle.net/zvn4w61d/

这不会发生在文字输入上。

知道如何实际删除焦点吗？

我想我可以给另一个文本输入焦点，但我必须动态创建它，聚焦它并销毁它。至少可以说有点hacky ......

Answer 1

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

window.getSelection().removeAllRanges();

<强> Working Demo

Answer 2

将此代码添加到您的主javascript文件中，所有可满足的组件都可以正常工作。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以CSS

执行此操作

试试这个

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

<强> Demo Here

从内容可编辑div中删除焦点

3 个答案: