Key Display

Display key press on web page

This is a simple web component, you can use it just like normal html element.

Features

• display key press
• merge repeat key press and show repeat count
• combine modifier key and other key

Install

npm install key-display

or just copy the key-display.js file

How to use

Vanilla JS

Please check the example

<script type="module">
  import defineKeyDisplay from "../key-display.js";
  defineKeyDisplay({
    maxKeys: 3,
    timeout: 100000,
    upperLetter: false,
    mergeModifierKey: false,
    mergeRepeatKey: true,
    showRepeatCount: true,
  });

  window.onload = () => {
    const keyDisplay = document.createElement("key-display");
    document.body.appendChild(keyDisplay);
  };
</script>

Vue.js

<script setup>
import defineKeyDisplay from 'key-display';

defineKeyDisplay({
  maxKeys: 3,
  timeout: 100000,
  upperLetter: false,
  mergeModifierKey: false,
  mergeRepeatKey: true,
  showRepeatCount: true,
});
</script>

and you need set compilerOptions.isCustomElement in vite.config.js

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ["key-display"].includes(tag),
        },
      },
    }),
  ],
})

Configuration

• maxKeys: max number of displayed keys
• timeout: time to disappear
• upperLetter: convert letter to uppercase
• mergeModifierKey: for example: Shift + Q
• mergeRepeatKey: merge last repeat key press
• showRepeatCount: show repeat count