Kei05
@Kei05

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

方向キー入力でイベントを発火したい

解決したいこと

キーボードの方向キー(左・右)を入力するとページネーションの「前のページへ」「次のページヘ」に指定しているリンク先に飛ぶようにしたいのですがaタグにonKeyDownを付けても発火しませんでした。
どのようにすれば良いのでしょうか。

Pager.jsx
import Link from 'next/link'
import React from 'react'

export const Pager = ({ prevPageLink, nextPageLink }) => {

  return (
    <div>
      <Link href={prevPageLink} aria-label='前のページへ'>
        前のページ
      </Link>
      <Link href={nextPageLink} aria-label='次のページへ'>
        次のページ
      </Link>
    </div>
  )
}
0

1Answer

aタグに対するonKeyDownではなく、documentに対してonKeyDownを設定してみてはどうでしょうか?

(aタグに対して設定されている状態であれば、Tab等でそのaタグにフォーカスを合わせた状態のキー入力で発火することになるかと思います。)

0Like

Comments

  1. @Kei05

    Questioner

    documentに対してということは対象のコンポーネント内に記述することができないでしょうか。

Your answer might help someone💌