1

This oninput Event documentation explains:

The oninput event occurs when an element gets user input.

This event occurs when the value of an or element is changed.

Tip: This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed. The other difference is that the onchange event also works on elements.

I'd like to use that from this LWC code:

<lightning-input-field
    ...
    oninput={handleOnInput}
    ...
></lightning-input-field>

but the handle function never gets called, at least in my code.

Should this work? Is there some LWC documentation that explains which DOM events are supported?

1
  • 2
    Hey Keith, AFAIK there are no registerable event handlers, certainly none in the documentation. That said the documentation has an example in "Lookup Fields" that shows the use of what looks to be both "success" and "change" events.
    – Phil W
    Sep 17 '20 at 12:32
2

As mentioned in the documentation

The native HTML element provides two events, input and change. The lightning-input component provides two custom events, change, and commit.

The component's change event behaves the same as the native input and change events together. It fires whenever you change the input value, as the element's input event does. It also fires when you finish changing the input, as the element's change event does.

The component's commit event fires only when you finish changing the input, which is the same behavior as the HTML element's change event.

The component doesn't provide an input event because the behavior is provided in the change event.

To summarize, the component's change event is equivalent to the input and change events of the element. The component's commit event is equivalent to the change event of the element.

So you should use onchange for normal input fields and oncommit for search types

<lightning-input label="My input" onchange={handler}></lightning-input>

if the change event doesn't suit the need, we can always switch to a standard HTML input element

<div class="slds-form-element">
    <label class="slds-form-element__label slds-no-flex">My input</label>
    <div class="slds-form-element__control slds-grow">
        <input type="text" oninput={handler} class="slds-input" value={value}>
    </div>
</div>
4
  • 1
    Thanks Anmol; the change event fires at a different time so not suitable for what I want.
    – Keith C
    Sep 17 '20 at 12:56
  • 1
    Got it! in that case, I think standard HTML input element is always an option :) Sep 17 '20 at 13:11
  • Also, this is the lightning-input not lightning-input-field...
    – Phil W
    Sep 17 '20 at 13:38
  • (This does not answer the question)
    – Phil W
    Sep 17 '20 at 13:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.