矢印キーでリスト内移動をしたい
解決したいこと
Go言語でタスク管理のwebサービスを開発しています。
その中で、以下のように最近取り組んだタスクのリストを表示する機能があります。
このリスト内を矢印キーを使ってカーソル移動できるようにしたいです。
初歩的な内容で申し訳ないのですが、ご教示お願いいたします。
発生している問題
以下の{{range .Tasks}}
の中にあるliをどうにかしたいです。
{{define "workspace_section"}}
<section class="workspace">
<div class="bg-black cancel"></div>
<div class="workspace__content">
<h3>TASKS</h3>
<div class="scroll-content">
<ul>
<!-- ここのリストを矢印キーで移動できるようにしたい -->
{{range .Tasks}}
<li class="pointer">
<span class="task-title">{{.Title}}</span>
<span class="category-color-span task-color-{{.ID}}">
<span class="color-span"></span>
<span class="category">{{.Category.Name}}</span>
<span class="hidden">{{.ID}}:{{.Category.Color.Status}}:{{.Category.Color.ID}}/</span>
</span>
</li>
{{end}}
<!-- ここまで -->
</ul>
</div>
</div>
</section>
{{end}}
チャレンジしたこと
jQueryを使って、liタグ
のフォーカスをいじってどうにかできるかなと思ってチャレンジしてみたのですが、aタグ
とかじゃないとできないっぽく断念。
vueを使った方法を考えてみましたが、Goからjson形式でフロントに渡す方法がわからず断念したという感じです…。
初歩的な内容で申し訳ありませんが、ご教示お願いいたします!
0