Key Event/Listener in LWC (Lightning Web Component)

Lot of times user needs to enter data quickly. In this case we would like to share with you how we have built a custom screen to enter Order Lines data quickly. But we had a unique requirement is that wherein when the user enters ENTER keyword, control needs to go to next line on same field.

We built this screen in Lightning Web Component (LWC) but there is no direct event to catch keypress for lightning-input. As a workaround we have used below code to listen ENTER key.

span onkeypress={key_event}>
    <lightning-input id="Input_Id" label="Enter" 
                         type="text" onchange={Test_Event}>
    </lightning-input>
</span>

Here we have added HTML <span> element across lightning-input to catch the keypress event. Since span is standard HTML element and have inbuilt keypress event so we have utilized same in our code.

Below code is for JS file

Key_event (component, event, helper) {
        if (component.which == 13) {
            alert (Perform some action ');
       }
   }

Here we have used component.which property to identify the key code. Likewise, you can use component.which property to identify the key codes.

You can find all key code at the web site http://gcctech.org/csc/javascript/javascript_keycodes.htm

Using the details mentioned in the blog we hope you are able to make use of the keypress event for capturing the details.

We hope you may find this blog resourceful and helpful. If you still have concerns and need more help, please contact us at salesforce@greytrix.com.

About Us
Greytrix – a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.

Greytrix has some unique solutions for Cloud CRM such as Salesforce Sage integration for Sage X3, Sage 100 and Sage 300 (Sage Accpac). We also offer best-in-class Cloud CRM Salesforce customization and development services along with services such as Salesforce Data Migration, Integrated App development, Custom App development and Technical Support to business partners and end users.
Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU™ integration for Sage ERP – Salesforce is a 5-star rated app listed on Salesforce AppExchange.

The GUMU™ Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.

For more information on our Salesforce products and services, contact us at salesforce@greytrix.com. We will be glad to assist you.

Related Posts