onselectionchangeを用いた、iOS Safariでのカーソル移動検知
完全版は物理キーボードに繋いだiPadでカーソル移動するを参照
2019/5/7
iPad Pro (iOS) にキーボードを繋いで動作確認する
これまでの調査 
Scrapboxのsearch box内では矢印キーでカーソル移動できるか？
ここは普通のinputタグなのでできる
カーソル移動を検知するだけの隠しinputを置くというアイデアのタネ
そのとき、どんなイベントが飛んでいるか？
keydown, keyup が取れるか？
alert(e.keyCode) を仕込んで調べる| ← | ↑ | ↓ | → | |
| keyDown | x | x | x | x |
| keyUp | x | x | x | x |
| keyPress | x | x | x | x |
ふつうの文字に関しては、すべてo
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); } | ← | ↑ | ↓ | → | |
| 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の隠し方
cssCopied!
.input-dummy { border: none; background-color: transparent; color: transparent; caret-color: transparent;} visibility: hidden や readOnly は使えない
課題
focusの移し合いは現実的でない
できたが、かなり不安定
上に書いたよりずっとシンプルにできたので、説明も書き直す