1

How can I capture the enter key press action in the js controller for lightning:input text. below is the code in the component file.

 <div class="slds-form-element">
       <lightning:input aura:id="firstNameId" label="First Name" 
                 value="{!v.firstName}" placeholder="First Name"/>
 </div>
  <div class="slds-form-element"  >
      <lightning:button variant="brand" label="Search" 
                 onclick="{! c.buttonAction }" />

  </div>
Improve this question

2 Answers 2

Reset to default
4

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)

Improve this answer
5
  • thanks for pointing in the right direction. Tried to get the key in js controller in following ways but was not successful. Any help is appreciated. console.log("key = "+event.keycode.info); console.log("key = "+event.key); console.log("key = "+event.getParam('key'));
    – sfdcdev
    Sep 25, 2017 at 5:47
  • if (event.keyCode === 13) {} This should work. You can give a try
    – brahma
    Sep 25, 2017 at 6:29
  • @brahmaji tammana, you cant fetch the keycode that way, close, but no cigar. Please check working with events in javascript
    – glls
    Sep 25, 2017 at 12:35
  • I tried the below ways to get the keycode but all of them were pretty much returning undefined. can you pls let me know how can I get the key code. console.log('params = '+JSON.stringify(event.getParams())); console.log('key = '+event.getParam("keyCode")); console.log('key = '+event.getParam("keycode")); console.log('key = '+event.getParam("key"));
    – sfdcdev
    Sep 25, 2017 at 17:35
  • @sfdcdev : The joys of testing Beta components =P
    – glls
    Sep 25, 2017 at 19:09
0

You can proceed in below way .You get the value of key. When u click on a key there is a event so you need to capture that event in your 

component.cmp


<aura:application >
<ui:inputText label="Name" aura:id="name" keydown="{!c.getInput}"/>
 </aura:application>


controller.js
Controller for the above code
({
handleChange : function(cmp, event,helper) {
           var txtstrg = cmp.find("myinput").get("v.value");
            if(txtstrg.length>0){  
             var gtAsci= txtstrg.substr(txtstrg.length - 1)
              console.log(gtAsci.charCodeAt(0));
            } 
        }   


})

Let me know in case of further input.

Improve this answer
5
  • Tried console.log('key = '+event.getParams().keyCode); for which I got undefined in the console log. Not sure if I have to add any code in the .cmp file. Please let me know if that is case.
    – sfdcdev
    Sep 28, 2017 at 5:12
  • <aura:application > <ui:inputText label="Name" aura:id="name" keydown="{!c.getInput}"/> </aura:application> "Please use KeyDown event to capture it .You will get the output in the console of the browser"
    – Harsh Singh
    Sep 28, 2017 at 5:22
  • with ui:inputText I was able to get the key, but I could not get with lightning:input which is what I was looking for.
    – sfdcdev
    Sep 28, 2017 at 5:51
  • Here you go : Call the below Controller Code for onChange event . handleChange : function(cmp, event,helper) { var validity = cmp.find("myinput").get("v.value"); if(validity.length>0){ var inval= validity[validity.length-1]; console.log(inval.charCodeAt(0));} }for lightning :input use <div class="slds-form-element"> <lightning:input name="input" aura:id="myinput" label="Enter some text" onchange="{!c.handleChange}" /> </div>.Let me know if still u have any concern
    – Harsh Singh
    Sep 28, 2017 at 6:51
  • @sfdcdev Plz vote this answer if it solve your problem
    – Harsh Singh
    Sep 28, 2017 at 10:41

You must log in to answer this question.

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