key-down #

A web component for quick key commands

Resources #

• melkat.dev demo

• melkat.dev repo

• melkat.dev npm

• text.tube demo

• source.tube repo

• source.tube npm

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>