[jQuery]iphone safariでgetSelection()がうまく動作しない

Question

やっていること

divにcontenteditableをつけた物からキャレットを外したら、最後にキャレットがあった位置を変数(_range.lastRange)に保存するしようとしております。
コンソールで確認してみたのですが、うまく選択されていない状態です。
androidやブラウザですとうまくいきます。

コード

$("#hoge").on("blur", function(event) {
			if(_range.lastRange == null) {
				var selection = $("#hoge").context.getSelection()
				console.log(selection)
				if( 0 < selection.rangeCount ) {
					_range.lastRange = selection.getRangeAt(0).cloneRange();
				}
			}
		});

コンソールの結果

Selection
anchorNode: null
anchorOffset: 0
baseNode: null
baseOffset: 0
extentNode: null
extentOffset: 0
focusNode: null
focusOffset: 0
isCollapsed: true
rangeCount: 0
type: "None"
__proto__: SelectionPrototype

調べてみたこと

MDNを確認してみましたが、対応しているということです。
https://developer.mozilla.org/ja/docs/Web/API/Window/getSelection

下記のURLに書いてあるように

[contenteditable] {
  -webkit-user-select: auto;
  user-select: all;
}

を書いてみましたが、解決しませんでした。
https://stackoverflow.com/questions/35281283/safari-getselection-not-working

対応方法などをご存知のかたがいらっしゃいましたら、教えて頂けると有難いです。

Answer 1

blurイベントが発生する時点で既にフォーカスが外れていて、セレクションも移動済みのようですね。「フォーカスが外れる直前」にコードを動かすためのイベントはないと思うので、セレクションの変更を常に監視するしかないと思います。

document.addEventListener('selectionchange', () => {
  // 目的の要素にフォーカスが当たっていたら
  if (document.activeElement == document.querySelector('#hoge')) {
    // _range.lastRange を更新する
  }
});