javascriptにて、要素にフォーカスが当たった"後"に処理を実行するにはどうすればよいでしょうか

Question

下記のように、contentEditableの要素に対して、

<div id="editor" contentEditable="true"></div>

フォーカスが当たった瞬間に

document.getSelection();

を用いて値を取得したいです。
試したこととして、フォーカスに当たった瞬間に下記のように実行して見ましたが、

$(function() {
  $("#editor").focus(function(){
    document.getSelection();
　　　　　　　　var range = sel.getRangeAt(0).cloneRange();
  });
});

フォーカスが当たった瞬間だとおそらくまだ実際に当たってはいない判定なのか、getSelectionで値が取れずにgetRangeAtをしようとした際にエラーとなってしまっています。

例えばページを開いた際とかに処理を仕込んで、下記のようにフォーカスを当てる処理を行なった後にgetSelectionを行うとうまくいきました。

  $("#editor").focus();
  var sel = document.getSelection();            
  var range = sel.getRangeAt(0).cloneRange();
  const text = document.createTextNode("a");

  range.insertNode(text);
  sel.removeAllRanges();
  sel.addRange(range);

ただ今回はどうしてもフォーカスを当てた時にgetSelection等の処理を行いたいです。

調べてもフォーカスが当たった瞬間に始動するjsは出てくるのですが、フォーカスが当たった後に始動する関数等はありますでしょうか。もしくは当たった瞬間でも、getSelectionによって値取得ができる方法ありましたら、ご教授いただければと思います。

Answer 1

おそらく、ブラウザの処理が

1. マウスクリックに反応して、要素にフォーカスを当てる
2. focus イベントを発行する
3. クリックした場所に応じてキャレット移動・テキスト選択をする

という順番なのでしょう。

よって、getSelection().getRangeAt(0) を setTimeout(..., 0) で遅延させて実行するか、selectionchange イベントを利用するとよいのではないかと思います。

document.querySelector('#editor').addEventListener('focus', () => {
  document.addEventListener('selectionchange', ()=> {
    // getRangeAt(0) を使った処理をここに。
    console.log(getSelection().getRangeAt(0));
  }, {once:true});
});

Comments

[teteoodhi]

selectionchangeイベントを利用することでうまくいきました。
本当にありがとうございます！

Answer 2

$(function() {
  $("#editor").focus(function(){
    // ↓これが抜けているのは質問文だけ？
    var sel = document.getSelection();
　　　　　　　　var range = sel.getRangeAt(0).cloneRange();
  });
});