9

How can i implement uiLinpuText Enter key Event in Lightning? what i want is when the user done inputing a value into a lightning textbox the (ui:inputText) , the user will just press the enter key in the keyboard and will execute a client side controller function().

HERE IS MY CODE

LIGHTNING COMPONENT

 <input aura:id="textsearch" 
        type="text" 
        name="default" 
        placeholder="Search Events..." 
        onkeyup="{!c.searchEvents}" 
        class="size-full ht-44 plm prx pvm input input--default input--ph-1 input--focus-1" />

CLIENT SIDE CONTROLLER

searchEvents: function(component, event, helper) {
    alert('Entered');
}

2 Answers 2

12

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

enter image description here

5
  • Does this approach still work for you? I get [event.getParams is not a function].
    – Adrian Larson
    Commented Aug 15, 2018 at 15:59
  • Depends on tag you are using ? Commented Aug 15, 2018 at 16:00
  • Could you add the code as a gist that's not working ? Commented Aug 15, 2018 at 16:01
  • 1
    I'm just binding an onkeyup event to an input tag, same as the OP. I'm able to reference event.keyCode but there is no event.getParams() function. Maybe it's a versioned change. Seems like it'd be best to just post a new question.
    – Adrian Larson
    Commented Aug 15, 2018 at 16:17
  • event.getParams().keyCode does it work with lightning:input ? if not, what's the alternative way?
    – cookie
    Commented Nov 2, 2018 at 7:41
8

Here is a lightning code sample. I tried it in an org that has Winter 16 Release deployed.

<aura:application >
    <aura:Attribute name='val' type = 'String' />
    <ui:inputText value='{!v.val}' keyup="{!c.search}" />
</aura:application>

({
    search : function(component, event, helper) {
        if(event.getParams().keyCode == 13){
          alert('Enter key pressed');
            // Do your work here
        }
    }
})
1
  • 1
    how to prevent user entering key using event.preventDefault() Commented Apr 5, 2017 at 10:00

You must log in to answer this question.

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