0

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>
3

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)

  • 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 '17 at 5:47
  • if (event.keyCode === 13) {} This should work. You can give a try – brahmaji tammana Sep 25 '17 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 '17 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 '17 at 17:35
  • @sfdcdev : The joys of testing Beta components =P – glls Sep 25 '17 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.

  • 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 '17 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 '17 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 '17 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 '17 at 6:51
  • @sfdcdev Plz vote this answer if it solve your problem – Harsh Singh Sep 28 '17 at 10:41

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.