Scrapboxで任意の文字にcursorを移動させる
発見したのでメモする
Thanks 
!
コード及び解説
click だとうまく行かないmouse buttonが押されて離された後に発行されるのが原因？
MouseEvent() の clientX , clientX に移動先文字の座標を入れる入れないと常に
.c-0 に飛ぶようになる誤動作を防ぐため、文字の高さの中間位を押すように
clientY を調節する調節しないと一つ上の行を選択してしまうことがある
必ず
mouseup も発行するこれを発行しなくても一見うまく行くように見えるが、ほんの少しmouseを動かすと選択範囲がいきなり現れる現象が起きる
おそらく「mouse buttonを離していない=文字列を選択中である」と解釈されるからではないか？
1. 行
id の n 文字目にcursorを移動させるリンクやcode block, 動画や画像の埋め込みがない行でのみ正常に動く
↑があると、文字をクリックできない
DOMを取得
jsconst char = document.getElementById(id).getElementsByClassName(`c-${n}`)[0];取得した文字の左上の座標を取得する
jsconst {left, top, height} = headChar.getBoundingClientRect();mouseを押すMouseEventを発行する
jsconst mouseOptions = {
button: 0,
clientX: left,
clientY: top + height / 2,
bubbles: true,
cancelable: true,
view: window
};jschar.dispatchEvent(new MouseEvent("mousedown", mouseOptions));mouse buttonを離すeventを発行する
jschar.dispatchEvent(new MouseEvent("mouseup", mouseOptions));2. 任意の行の末尾にcursorを移動する
リンクやcode block、画像がある行でもつかえる
動画があっても使えるはず
行
id の span.text を取得するjsconst line = document.getElementById(id).getElementsByClassName('text')[0]; span.text の座標を取得するjsconst {right, top, height} = line.getBoundingClientRect(); span.text の右端をclickするよう設定するjsconst mouseOptions = {
button: 0,
clientX: right,
clientY: top + height/2,
bubbles: true,
cancelable: true,
shiftKey: shiftKey,
ctrlKey: ctrlKey,
altKey: altKey,
view: window
};あとは1.と同じ
jsline.dispatchEvent(new MouseEvent("mousedown", mouseOptions));
line.dispatchEvent(new MouseEvent("mouseup", mouseOptions));#2020-11-24 01:08:18