[SalesForce] Enter key pressed inside a lightning input

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

Best Answer

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

Related Solutions

[SalesForce] How to implement ui:inpuText Enter key event in Lightning

You can get the keyCode from the event object .Below is what I tried and worked

({
  searchEvents: function(component, event, helper) {
      console.log(event.getParams().keyCode);
      if(event.getParams().keyCode == 13){
        alert('Enter key pressed');
      }
   }
 })

You can also use which as well .Below is the console.log of whole event object

[SalesForce] Enter key capture for lightning input tag

The lightning:input component has an onchange attribute:

The action triggered when a value attribute changes.

component.cmp

<lightning:input label="Name" name="myname" onchange="{! c.changeHandler }"/>

controller.js

changeHandler : function(component, event, helper) {
    validate that enterKey was pressed and do some action

}

the documentation for the component can be found here

you can use keycode.info for checking character codes, as to actually identifying the key value in your function, you can refer to Working with Events in Javascript

UPDATE: for some reason, unable to fetch Key event parameters when using lightning input.

Workaround is to wrap the component in an HTML tag that supports onkeypress events:

All HTML elements, EXCEPT:

<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

and a us the event.which property to listen for the pressed key

<div onkeypress="{!c.controllerMethod}">
    <lightning:input --attributes-- />
</div>

Tested and works (Winter '18)

Best Answer

Related Solutions

[SalesForce] How to implement ui:inpuText Enter key event in Lightning

[SalesForce] Enter key capture for lightning input tag

Related Topic