contenteditable="true"にしたdiv要素をフォーカス時に中身の文字を全選択にしたいが効かない

Question

      <div id="target" contenteditable="true">文字を入力</div>

  document.getElementById('target').addEventListener('focus',function(){
     
     $(this).select();//ここで"文字を入力"を選択する
     console.log(this);//ログは出力される
  
  });

contenteditable="true"ではなくtextareaやinut[type="text"]でないと全選択できないのでしょうか？

詳しい方ご教授いただければ幸いです。

Answer 1

input/textarea と contenteditable はかなりAPIが異なります。全選択するには SelectAll コマンドを使います。

document.getElementById('target').addEventListener('focus', function() {
  document.execCommand('SelectAll');
});

Answer 2

contenteditableな要素は入れ子を持つ可能性があるため単純には
範囲選択はできません

sample

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const target=document.querySelector('#target');
  target.addEventListener('focus',()=>{
    const r=document.createRange();
    r.setStart(target,0);
    r.setEnd(target,1);
    window.getSelection().addRange(r);
  });
});
</script>
<div id="target" contenteditable="true">文字を入力</div>

Comments

[dimyas]

コメントありがとうございます。
そのコードを試してみたらうまく全体選択されました。

2回目以降はフォーカスしても全体選択されないのはなぜでしょうか？

ページを再読み込みしてからなら再度、全体選択できるようになります。

contenteditableな要素の中のテキストの一部を選択して、その両端をspanタグで挟んで色などのスタイルを変えさせることも入れ子を持つ可能性があるによって難しくなったりしますか？

[int32_t]

現状のコードは、「最初の子ノード1つだけ選択」になってますね。
setEnd() の 1 を target.childNodes.length などに修正する必要があります。