查看ContentEditable div是否具有焦点
我试图检查一个可信的div是否有焦点，但我遇到了一些麻烦。 到目前为止，这是我的代码：
if ($("#journal-content:focus")) { alert("Has Focus"); } else { alert("Doesn't Have Focus"); } 问题是，它总是返回“有焦点”，即使它没有。 这样做的最佳方法是什么？
更新：执行此操作的原因是在插入新元素之前查看光标是否位于所需位置。 否则，如果用户单击的最后一个位置在标题中，那么当我使用Rangy恢复选择并将其替换为新元素时，它最终会出现在标题中。 我需要一种方法来确定contenteditable div是否已被聚焦/将光标放在其中，所以如果没有，我将简单地追加我在最后插入的元素。
更新2：这是一个说明我的问题的JSFiddle： http ： //jsfiddle.net/2NHrM/
尝试：
if ($("#journal-content").is(":focus")) { alert("Has Focus"); } else { alert("Doesn't Have Focus"); }
要么：
window.contenteditable_focused = false; $("#journal-content").focus(function() { //alert("Has Focus"); contenteditable_focused = true; }); $("#journal-content").blur(function() { //alert("Doesn't Have Focus"); contenteditable_focused = false; });
在执行脚本之前检查contenteditable_focused 。
要么：
if ($( document.activeElement ).is("#journal-content")) { alert("Has Focus"); } else { alert("Doesn't Have Focus"); }
那这个呢？：
if (document.activeElement.isContentEditable) { ... }
我不知道浏览器对此的支持程度如何，但至少Chrome和Firefox支持它。
对于纯JavaScript，当您有多个contenteditable元素时：
CSS和Markup纯粹是用于代码片段
尝试运行代码段并按任一元素。
function isFocused() { if (document.activeElement.id == "journal-content") { alert("Focused!"); } else { alert("Not focused :("); } }
#journal-content { background-color: #eee; } #not-journal-content { background-color: #ccc; }
Journal Content Not Journal Content
你可以试试这个
if ($("#journal-content").is(":focus")) { ...
也许如果你告诉我们你想要实现什么，我们会更有帮助。 同时，您可以在这里阅读： http ： //api.jquery.com/focus-selector/ 。