Enter key pressed inside a lightning input

Question

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)
}

Answer 1

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);
    }    
}

Answer 2

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();
    }
}

Answer 3

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.