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

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

Use the below inputchangeex.js code

import {
} 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">


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

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

You can able to see the input keypress changes