0

子 div を持つ contenteditable=true の div があります。デフォルトのテキストをクリアするために、キーダウン イベントを子 div の 1 つにアタッチしようとしています。ただし、キーダウンイベントを機能させることができません。クリックイベントは正常に機能するため、何が欠けているのかわかりません。

まず、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 イベントで発生することはありません。クリックイベントに変更してクリックすると発火します。contenteditable タグで keydown が機能しないことと関係がありますか? jquery マニュアルを読む:

keydown イベントは、ユーザーが最初にキーボードのキーを押したときに要素に送信されます。任意の要素にアタッチできますが、イベントはフォーカスを持つ要素にのみ送信されます。フォーカス可能な要素はブラウザーによって異なる場合がありますが、フォーム要素は常にフォーカスを取得できるため、このイベント タイプの妥当な候補です。

div が真に「焦点を合わせる」ことができないという問題はありますか? おそらく、tabIndex を指定するとどうなるでしょうか。

4

1 に答える 1

4

問題は、フォーカスを適用する場所でした。親 div にフォーカスを適用してから、カーソルを子の 1 つに移動し、その子に keydown イベントを適用しようとしました。親に適用すると、うまくいきました。

于 2013-09-06T19:46:57.013 に答える