table表の内部でのキャレット移動について / JavaScript

キャレット操作は難しい 

これまでにも、何度かキャレット操作に関するJavaScriptコードを使ったり作ったりして来ましたが、今回は上手く出来ずにボツにしました。

「table要素」のどこかのセルにキャレットを入れた時、「⇨」「⇦」のキー操作では、内部の文字列を辿る形で「キャレット」が移動します。 これは「編集画面」に書いた一般のテキスト（文面）での移動と全く同じです。「⇧」「⇩」のキー操作も、通常の「編集画面」（PC版）と全く同様にキャレットが移動します。

下の「表」は敢えて長めの文字列をセルに記入した例です。 この表は記事上でも実際にキャレットを入れられる様にしていますが、表中のキャレット移動は、編集時と同じです。

上表の ❶ にあるキャレットは、「⇨」を押すと ❷ に移動します。 これは本来の移動ですが、表内のデータの記入時に、❶ から ❸ にキャレット移動をしたい時は、けっこう多いと思います。 

この縦方向のキャレット移動を「⇩」「⇧」で出来る様にしたかったのです。

しかし、色々とコードを作ったのですが、今回は駄目でした。

キャレットのあるセルを取得する一般的なコード 

この種の問題は、どうもプログラマーを悩ませる問題のひとつらしいです。 この場合は、現在キャレットがあるセルがどのセルかを取得する事ができれは、なんとか出来そうでしたが。

何か仮の文字を書き込んで、その文字を再取得してキャレットの位置を取得するという方法は、場合によっては対象要素が分解して失敗する事があっても、有効な方法のひとつとして挙げられています。 これは「Both-WH ⭐    」で使ったテクニックとほぼ同じです。

もう少しスマートな方法が無いか、色々と調べたのですが...

ContentEditable な caret の位置（座標）を取得する - Qiitaブラウザで動くエディタを開発していると避けては通れない contenteditable な caret の位置（座標）。いろいろなアプローチがありますが、一部のケース（縦書き）でうまく動かないことが…qiita.com

例えば、上の記事に紹介されたコードは、良く出て来る（他に方法は少ないため、同様のコードがどこでも出て来ます）コードです。

<p contenteditable="true">click me</p>
<script>
  document.onselectionchange = () => {
    const pos = window.getSelection().getRangeAt(0).getBoundingClientRect()
    console.log(pos)
  }
</script>

これは「click」操作があった場合に、そのキャレット位置を取得できるのですが、私が必要としたのは「キャレット」を「⇧」「⇩」キーで移動した時に、そのキャレット位置を知る必要があるわけです。

失敗列 

下は、キャレット位置のセルを「now_td」として取得し、その取得時の「event」から分岐して「move_down」「move_up」の関数で上下のセルへ移動し、そこでセルにキャレットを入れる操作をする「つもり」で作ったコードです。

iframe_doc.onkeydown=function(event){
    let elm=iframe_doc.elementFromPoint(event.clientX, event.clientY);
    let now_td=elm.closest('td');
    go_key(event, now_td); }

function go_key(event, now_td){
    if(event.keyCode==40){
        event.preventDefault();
        move_down(now_td); }
    else if(event.keyCode==38){
        event.preventDefault();
        move_up(now_td); }}

しかし、色々と頑張っても上手く行きません。 その内に、このコードの根本的な問題がある事が、うすうす判って来たのですが、コードの動作する起点の「event」は、「click」ではなく「onkeydown」（キー入力）になっているからの様です。

まあ、失敗列を挙げても、人様の利にはならないかも知れませんが、「⇩」や「⇧」のキーを入力した時に、キャレットがある場所を取得できれば、最初に書いた様な縦方向のセルへのキャレット移動が可能になるのですが。

これは、今後の課題です。 キャレット操作のコードがすらすら書けたらプロになれると思います。