HTMLのcontenteditableの、フォーカスの操作をしたい

Question

HTMLのcontenteditable属性について質問です。
ページの読み込み時に自動でフォーカスされるようにしたかったので
試しにautofocus属性をつけてみたのですが上手くいかず、
試しにjQueryのfocus関数を使ってみましたが、
これもダメでした。contenteditable属性のフォーカスを
制御する方法はないのですか？

Answer 1

HTMLSelectElement.autofocus - Web API | MDN
autofocus属性はselect要素で使うもののようですが。

Document: DOMContentLoaded イベント - Web API | MDN
DOMContentLoaded イベントでフォーカスを与えるようなコードを書けば解決しそうな気がします。
例えば

document.addEventListener('DOMContentLoaded', function(){
	document.getElementById('target-element').focus();
},false);

など。

Answer 2

autofocus は仕様上では contenteditable にも使用できます。Chrome、Edge、Safari 15.4 以降なら動くようです。

Safari 15.3以下や Firefox で動くようにするなら、要素の focus() を呼びましょう。jQuery の focus() でも動くはずです。