20

I have a lightning:input and when the focus is on it and you type the enter stroke: it refreshes the page.

I tried to prevent it by implementing the onchange: avoid the event to be fire but the callback is never launched.

Component.cmp:

<lightning:input
  type="email"
  onchange="{! c.callbackNeverCalled }"
/>

Controller.js:

callbackNeverCalled: function(component, event, helper) {
  event.preventDefault(); // Does not prevent from refreshing/redirecting the page & also 'deprecated'.

  event.getSource().getParams(); 
  // Is an empty object but the good way to do (cf. documentation)
}
7
  • Ok i checked the documentation of the lightning input and there is no onkeyup event. If you can add javascript to your page. Here's a solution I found. Commented Jan 12, 2017 at 8:55
  • My callback for the onchange event is now working. But there are still two issues: event.preventDefault() do not prevent from refreshing/redirecting the page and I can access the keyup by doing event.getSource().getElement().KEYUP (this will be deprecated, displayed at usage for event.getSource().getParams() but this does not return anything other than an empty object at the moment).
    – Simonp
    Commented Jan 12, 2017 at 18:01
  • event.KEYUP give us this message: Avoid relying on the native event attribute KEYUP as it is only included for backwards-compatibility. It will eventually be deprecated. Use the aura event API (e.g., getSource(), getParams(), etc) instead.
    – Simonp
    Commented Jan 12, 2017 at 18:12
  • Still not fixed..
    – Simonp
    Commented Jan 22, 2017 at 10:12
  • 1
    @SimonPlacentino Are you putting your lightning:input in a form? This is typically not how you'd write a component/app.
    – sfdcfox
    Commented Feb 17, 2018 at 16:22

4 Answers 4

20

Thanks to SFDCFOX and PatMcClellan__c. Workaround is:

    <span onkeypress="{!c.keyCheck}" class="slds-size--11-of-12">
        <lightning:input aura:id="body" label="" name="Body" placeholder="Enter message..." value="{!v.Message.Body__c}" />
    </span>
keyCheck : function(component, event, helper){
    if (event.which == 13){
        helper.onSend(component, event);
    }    
}
4

In LWC this works as

<span onkeypress={keycheck}>
    <lightning-input label="input1" data-fieldapiname="Name">
    </lightning-input>
</span>
keycheck(component, event, helper){
    if (component.which == 13){
        // call the js method i.e. this.handlerfilter();
    }
}
0

Try using the oncommit event of the lightning-input component. No need to use a wrapper span. It can be found in the documentation in the lightning component library.

2
  • 1
    commit fires when you press enter or when the input loses focus. In a type="search" input, it also fires when the user clicks the "x" to clear the search field. It does not include any params to tell you which occurred, so if you only want to take action when "enter" is pressed, it is not sufficient. Commented Oct 14, 2021 at 14:00
  • @jasonClark agreed. Commented Oct 16, 2021 at 3:31
-3

For LWC you can use below code snipet:

HTML

<lightning-button label="Ok" varient="success" 
onclick={handleClick} onkeyup={handleEnterButton}>
</lightning-button>

JS

handleEnterButton(event){   
     if(event.keyCode === 13)
     event.preventDefault();
}
3
  • Question regaring to the Aura commponent and the question is too old. Commented May 23 at 10:09
  • 1
    Why are you using a lightning-button? The question is about lightning:input. Aside from that (and that the question is about Aura, not LWC), this appears to be functionally the same as the existing answers from 5-7 years ago.
    – Derek F
    Commented May 23 at 11:53
  • Hi, and welcome to SFSE! Please take a moment to read about How to Answer and take our quick tour. Your answer doesn't address the original problem, and yet also nearly duplicate existing answers. You can edit your question if you feel this answer can be distinct from the others, or you can help contribute to other answers you find interesting. We're here to help, so also feel free to ask any questions you may have. We look forward to your future contributes here on SFSE.
    – sfdcfox
    Commented May 28 at 1:28

You must log in to answer this question.

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