onselectionchangeを用いた、iOS Safariでのカーソル移動検知
完全版は物理キーボードに繋いだiPadでカーソル移動するを参照
2019/5/7
iPad Pro (iOS) にキーボードを繋いで動作確認する
これまでの調査 daiiz.icon
Scrapboxのsearch box内では矢印キーでカーソル移動できるか？
ここは普通のinputタグなのでできる
カーソル移動を検知するだけの隠しinputを置くというアイデアのタネ
そのとき、どんなイベントが飛んでいるか？
keydown, keyup が取れるか？
alert(e.keyCode) を仕込んで調べるinput
| ← | ↑ | ↓ | → | |
| keyDown | x | x | x | x |
| keyUp | x | x | x | x |
| keyPress | x | x | x | x |
ふつうの文字に関しては、すべてo
textareaにするとどうか
textarea
| ← | ↑ | ↓ | → | |
| keyDown | x | x | x | x |
| keyUp | x | x | x | x |
| keyPress | x | x | x | x |
やはりkeyDown, keyUp, keyXXXX は諦めるしかない
本題
GWの帰りの新幹線で思い出したonselectionchangeを試してみる
onselectionchange
document.onselectionchange = e => { console.log(e); } input
| ← | ↑ | ↓ | → | |
| onselectionchange | o | o | o | o |
document.activeEvent === document.querySelector(".input-dummy") のときだけ反応すればいいさらに ArrowLeft (37), ArrowRight (39) だけ反応すればいい
攻略できた
フォーカスの状態遷移
.text-input (既存)
文字入力を受け付けるための隠しtextarea
.input-dummy (仮称、新設)
onselectionchangeを発火させるための隠しinput
これを実装できればiOSでもカーソルを自在に操れる
.input-dummyに対する小細工は相変わらず必要
top位置調整
valueを十分に長くする
長押しさせない
OS標準の範囲選択UIが発動してしまうため
input-dummyの隠し方
css.input-dummy {
border: none;
background-color: transparent;
color: transparent;
caret-color: transparent;
}visibility: hidden や readOnly は使えない
課題
focusの移し合いは現実的でない
できたが、かなり不安定 
上に書いたよりずっとシンプルにできたので、説明も書き直す