jquery keydown 事件不适用于 contenteditable div答案

【问题标题】：jquery keydown event doesn't work for contenteditable divjquery keydown 事件不适用于 contenteditable div
【发布时间】：2013-09-08 12:05:02
【问题描述】：

我有一个 contenteditable=true 的 div，它有子 div。我正在尝试将 keydown 事件附加到其中一个子 div 以清除默认文本。但是，我无法让 keydown 事件起作用。点击事件工作正常，所以我不确定我错过了什么。

首先，我试图将焦点放在 contenteditable 设置为 true 的外部 div。

var $editableDiv = $("#ID");
$editableDiv.focus();

然后我想将光标移动到我希望他们输入的 div 上。

var focusDiv = $editableDiv.children("div").children("div")[0];
var sel = window.getSelection();
var range = document.createRange();
range.setStart(focusDiv, 0);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

现在我尝试附加 keydown 事件：

$(focusDiv).on("keydown", function (e)
{
  var $target = $(e.target);
  if ($target.text() === "Enter comment here")
  {
    $target.text("");
  }
}

但这永远不会在 keydown 事件中触发。如果我将其更改为单击事件并单击它，它将触发。它是否与 keydown 不能处理 contenteditable 标签有关？阅读jquery手册：

当用户第一次按下键盘上的键时，keydown 事件被发送到元素。它可以附加到任何元素，但事件仅发送到具有焦点的元素。可聚焦元素在浏览器之间可能会有所不同，但表单元素始终可以获得焦点，因此是此事件类型的合理候选者。

div 不能真正“集中注意力”会不会是个问题？也许如果我给它一个 tabIndex？

【问题讨论】：

我几乎回答了我自己的问题。问题是我将焦点放在外部 div 上，然后将光标移动到内部 div 中。然后尝试在最初没有获得焦点的内部 div 上调用 keydown 事件。但是，如果我将焦点放在内部 div 上，它周围会出现一个我不喜欢的奇怪的散列框。不知道该怎么办。

标签： jquery contenteditable

【解决方案1】：

问题在于我在哪里应用焦点。我将焦点应用于父 div，然后将光标移动到其中一个孩子并尝试将 keydown 事件应用于该孩子。一旦我将它应用于父级，它就起作用了。

【讨论】：