1

Aim: To call a js method when an lightning input text is filled in LWC form. Eg: After typing Salesforce and moving out the field should invoke the JS function.

<lightning-input label="Email" type="email" required onchange={onUserEmailChnage}></lightning-input>

By using lightning-input's onchange function, JS function is being called after typing each and every alphabet like s, sa etc are sending to JS function instead of sending Salesforce.

<lightning-input label="Email" type="email" required onblur={onUserEmailChnage}></lightning-input>

When I use 'onfocus' or 'onblur' instead of 'onchange' getting an Error as attached.OnBlur/OnFoucs

Can anyone help me on building a functionality which should call JS function when complete word is typed.

1
  • 1
    Is the handler function name correct : onUserEmailChnage or is it onUserEmailChange ? You have interchanged few letters.
    – Rohit
    Commented Feb 22, 2023 at 11:50

3 Answers 3

2

Tried above scenario on lightning playground and it works fine.

Markup code :

<lightning-input type="email" label="Email address" required onblur={onUserEmailChnage}></lightning-input>

js code :

onUserEmailChnage(event) {
        console.log('input value ',event.target.value);
    }

onBlur will fire when user focus moves away from the input element which should be correct given the use case.

2
  • Thank you. I have used event.detail.value on js which is reason for the error.
    – Rv1
    Commented Feb 22, 2023 at 12:17
  • Please mark it as the answer if it solved your problem.
    – Rohit
    Commented Feb 22, 2023 at 12:18
0

onblur and onchange also don't fire on aura cmp, if the type is email. Works well if type is not stated which means string.

0

extend when you use lightning-input-field

focus:

<lightning-input-field name="lname" field-name="LastName" onfocusin={handleInputFocus}></lightning-input-field>

blur:

<lightning-input-field name="lname" field-name="LastName" onfocusout={handleInputFocus}></lightning-input-field>

js:

    handleInputFocus(event) {
        console.log('fired');
        console.log(event.target.name);
        console.log(event.target.value);
    }

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .