從內容可編輯div中刪除焦點

Question

如果我以編程方式刪除內容可編輯div的焦點，它看起來沒有焦點，但如果用戶鍵入它仍然具有焦點。

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

如果您隨后開始輸入，它仍然具有焦點。

https://jsfiddle.net/zvn4w61d/

這不會發生在文本輸入上。

知道如何實際刪除焦點嗎？

我想我可以給另一個文本輸入焦點，但是我必須動態創建它，聚焦它並銷毀它。 有點hacky至少可以說....

Answer 1

您可以使用表示用戶選擇的文本范圍的選擇對象或插入符號的當前位置以及removeAllRanges來從選擇中刪除所有范圍：

window.getSelection().removeAllRanges();

工作演示

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> 

Answer 3

你可以通過CSS做到這一點

試試這個

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

在這里演示