key-down

A web component for quick key commands

Install

npm install --save @zicklepop/key-down

Resources

• Demo
• GitHub
• NPM
• JSR

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></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.

<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>