keywalk

Keywalk let you to walk through HTML elements via up/down arrow keys.

Demo

Codepen

Install

npm i keywalk

# or using yarn

yarn add keywalk

import Keywalk from 'keywalk'

Or include from CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]">

Parameters

| Parameter | Type | Description | Default | | :------------ | :----- | :--------------------------------------------------------------------------------------------------------------- | :------: | | trigger | string | The element to listen the key event. (with CSS selector) | document | | container | string | Root container of items. Keywalk will walk on nodes that are direct children of the container. Required | - | | activeClass | string | CSS class name of currently active item. | 'active' | | selectKey | string | The key that trigger the onSelect() event. Can be specified by a key name. | 'Enter' |

Events

| Event | Description | | :------------------------- | :------------------------------------------------------------ | | onWalk(element, index) | Will return the HTML node and index of currently active item. | | onSelect(element, index) | Will return the HTML node and index of selected item. |

Functions

| Function | Description | | :-------- | :-------------------------------------- | | reset() | Will reset the focus state on the list. |

How to use

<input id="input" />
<ul class="list">
  <li>Orange</li>
  <li>Cherry</li>
  <li>Banana</li>
  <li>Apple</li>
  <li>Pineapple</li>
</ul>

<script>
  new Keywalk({
    trigger: '#input',
    container: '.list',
    onWalk: (element, index) => {
      console.log('active item: ', element, ' index: ', index)
    },
    onSelect: (element, index) => {
      console.log('selected item: ', element, ' index: ', index)
    }
  })
</script>

Reset the focus state:

const keywalk = new Keywalk({
  ...
})

btn.addEventListener('click', () => {
  keywalk.reset()
})