子 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 を指定するとどうなるでしょうか。