In this blog I will show you how you may trigger functionality in your Lightning Web and Aura Component using Keyboard Keys.

To utilize key events you just need to add a event listener for them. In below example I have triggered a button's click on the enter key press event.

HTML

<template>
  <lightning-card title="Trigger Button on Enter">
    <div class="slds-box">
      <lightning-layout multiple-rows>
        <lightning-layout-item size="12" padding="around-small">
          <lightning-input
            data-id="txt"
            label="Your text here"
            type="text"
            onchange={handleChange}
            value={txtValue}
            class="slds-p-top_medium"
          ></lightning-input>
        </lightning-layout-item>
        <lightning-layout-item size="12" padding="around-small">
          <lightning-button
            label="Click me or hit Enter"
            title="Click me"
            onclick={handleButton}
          ></lightning-button>
        </lightning-layout-item>
        <template if:true={showValue}>
          <lightning-layout-item size="12" padding="around-small">
            <p style="font-size: xx-large; color: tan">
              <b>{txtValue}</b>
            </p>
          </lightning-layout-item>
        </template>
      </lightning-layout>
    </div>
  </lightning-card>
</template>

JS

import { LightningElement } from "lwc";

export default class TriggerButtonOnEnter extends LightningElement {
  txtValue;
  showValue = false;

  renderedCallback() {
    this.template
      .querySelector("lightning-input")
      .addEventListener("keydown", (event) => {
        // alert("Key: " + event.key + ", Code: " + event.code);
        if (event.key === "Enter") {
          this.handleButton();
        }
      });
  }

  handleChange(event) {
    this.txtValue = event.target.value;
  }
  handleButton() {
    this.showValue = true;
  }
}