key-down demo

Install

npm install --save @zicklepop/key-down

Properties

data-key: string, required: The key we are watching to be pressed
data-action: enum, optional: Defaults to 'click', but can be set to be 'focus'
data-scroll: boolean, optional: If true, the page will scroll the wrapped element in to view
data-altKey: boolean, optional: Setting this as true or false will require the alt/option key to be pressed or not, otherwise it will not matter.
data-ctrlKey: boolean, optional: Setting this as true or false will require the control key to be pressed or not, otherwise it will not matter.
data-metaKey: boolean, optional: Setting this as true or false will require the meta/Windows/command key to be pressed or not, otherwise it will not matter.
data-shiftKey: boolean, optional: Setting this as true or false will require the shift key to be pressed or not, otherwise it will not matter. If you just want to monitor for a capital letter or symbol, it is recommended to set the `data-key` value to it (ie `A` or `!`)

Basic Usage

Just requires a clickable child element

<key-down data-key="a">
  <button>
    Press 'a' key
  </button>
</key-down>

With Defined Action

By default, the web component will click the child when the key is pressed, but you can pass in an action like 'focus' for input boxes.

<key-down
  data-key="b"
  data-action="focus"
>
  <input
    type="text"
    placeholder="Press 'b' key"
  />
</key-down>

With Everything

Using every manual property. While I included the class to show the count, it should not show anything

<key-down
  data-key="b"
  data-action="focus"
  data-scroll="true"
  data-altKey="false"
  data-ctrlKey="true"
  data-metaKey="false"
  data-shiftKey="false"
>
  <input
    type="text"
    placeholder="Press 'ctrl+b' key"
  />
</key-down>