text - contenteditable を持つ要素でオートフォーカスを使用できますか?

Question

オンデマンドでテキスト フィールドとして機能させるために、contenteditable属性を使用しています (ユーザーが何かの名前を変更するため)。しかし、ユーザーがすぐに入力を開始できるように、それも<div>有効にしたいです(最初は常に有効になっています)。autofocus<div>contenteditable

これは有効かつ/または可能ですか? または、標準のテキスト入力に切り替える必要がありますか?

Answer 1

ほとんどのブラウザーで JavaScript を使用する必要があると思います。また、iOS では動作しません。iOS ではfocus()、本物のユーザー インタラクション (clickまたはタッチ関連のイベントなど) のイベント ハンドラーでのプログラムによる使用のみが許可されます。

また、ページに他の入力がある場合、ドキュメントが完全にロードされる前にユーザーがそれらの入力の 1 つにフォーカスする可能性があることに注意してください。そのloadため、入力のfocusイベントを使用してこれを追跡する必要があります。

<div contenteditable="true" id="editable"></div>

<script type="text/javascript">
    window.onload = function() {
        document.getElementById("editable").focus();
    };
</script>

Answer 2

将来の視聴者のために：

もう少しエレガントな解決策があるかもしれないと思います。

$(window).on("load", function() {
  $("[autofocus]").focus();
});

そのため、ページが読み込まれると... BAM jQuery は「autofocus」属性を持つ要素にフォーカスします!

セレクターをいじって、必要なものを正確に取得できます。