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

  • Does this approach still work for you? I get [event.getParams is not a function]. – Adrian Larson Aug 15 '18 at 15:59
  • Depends on tag you are using ? – Mohith Shrivastava Aug 15 '18 at 16:00
  • Could you add the code as a gist that's not working ? – Mohith Shrivastava Aug 15 '18 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 Aug 15 '18 at 16:17
  • event.getParams().keyCode does it work with lightning:input ? if not, what's the alternative way? – cookie Nov 2 '18 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
    how to prevent user entering key using event.preventDefault() – DOMINIC EDWARD Apr 5 '17 at 10:00

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.