Handle Input Changes in Lightning Web Components

Let us discuss here how to detect the input field value changes in lightning web components.T o listen for changes from an element in your template that accepts input, such as a text field. use the onchange or onkeypress event with an @track property.

Create a new Lightning Web component using the below SFDX command. In this example first, we are using the HTML input tag

sfdx force:lightning:component:create --type lwc --componentname inputchangeex --outputdir force-app\main\default\lwc

Use the below inputchangeex.html code

<template>
    Enterd Value - {myValue}
    <br />
    <input type="text" value={myValue} onkeypress={handleChange} />
</template>

Use the below inputchangeex.js code

import {
    LightningElement,
    track
} from 'lwc';

export default class Inputchangeex extends LightningElement {
    @track myValue = "initial value";
    handleChange(evt) {
        this.myValue = evt.target.value;
        console.log('Current value of the input: ' + evt.target.value);
    }

}

Use the below inputchange.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

 

Push the changes using the below SFDX command

 sfdx force:source:push

 

Add this component to the record page and you can able to see the output like below.

 

 

Let’s define the same code to use lightning-input . A lightning-input component creates an HTML input element.

Update the Html code as shown below and push the changes

<template>
    Lightning Input Value - {myValue}
    <br />
    <lightning-input type="text" value={myValue} onchange={handleChange} ></lightning-input>
</template>

You can able to see the input keypress changes