Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
PatMcClellan__cPatMcClellan__c 

lightning:input events?

I'm seeking more info on lightning:input for use in a Lightning Component.

What I want to do is have the input text field submit when the user presses the Enter key. However, the Enter key seems to be ignored by lightning:input. Also, I can't even retrieve the keycode with my handler.

component markup: 
                  <lightning:input aura:id="body"
                                         label=""
                                         name="Body"
                                         placeholder="Enter message..."
                                         value="{!v.Message.Body__c}"
                                         onchange="{!c.keyCheck}"/>

                    </lightning:layoutItem>
And my keyCheck handler: 
keyCheck: function(component, event, helper){
        console.log(event.getParams('keyCode')); 
        }
The handler is getting called, but the value is undefined. I think it's undefined because the event that is happening is NOT the keypress/keyDown/keyUp, but rather the input field is changing. But lightning:input chokes (won't compile) if I try to add a keyDown event in its parameters in the markup.

BTW, I've tried doing this with ui:inputText as well, and that doesn't work either.

Help please?

 
Best Answer chosen by PatMcClellan__c
PatMcClellan__cPatMcClellan__c
I found another answer (thx to SFDCFOX on Stack Exchange). I'm able to keep my wrap my lightning:input inside a span, which has an onkeypress handler.
  
                 <span onkeypress="{!c.keyCheck}" class="slds-size--11-of-12">
                    <lightning:layoutItem size="12">
                        <lightning:input aura:id="body"
                                         label=""
                                         name="Body"
                                         placeholder="Enter message..."
                                         value="{!v.Message.Body__c}" />

                    </lightning:layoutItem>
                  </span>
And the handler: 
keyCheck : function(component, event, helper){
        if (event.which == 13){
            helper.onSend(component, event);
        }

    },
Note that since span isn't a lightning element, I had to use the slds class on it, rather than the simpler size attribute.
 

All Answers

Alain CabonAlain Cabon
​Hello,

There are only three actions "on":
  1. onblur Action The action triggered when the element releases focus.
  2. onchange Action The action triggered when a value attribute changes.
  3. onfocus Action The action triggered when the element receives focus.
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_input.htm 
keyCheck: function(component, event, helper){       
     var whichOne = event.getSource().getLocalId();         
     var mycmp = component.find(whichOne);
     console.log(whichOne + '=' + mycmp.get("v.value"));
     var mytest = 'test';
     mycmp.set("v.value",mytest);     
}
Alain
PatMcClellan__cPatMcClellan__c
Alain, thanks for your response... though it was not the news I had hoped for. I have no problem accessing the value of the field, as it's bound to a component attribute. And the onchange functions to activate the keyCheck each time the value changes -- but the value doesn't change when the Enter key is pressed. lightning:input ignores Enter. So I can't figure a way to spot the Enter key press.

I guess I'll venture outside of Lightning to general Javascript and try to find a window or document event sensor.

 
Alain CabonAlain Cabon
Hi,

I tried this and that works.

Component:
  
<ui:inputText value="{!v.val}"  keyup="{!c.onKeyUp}" />

Controller.js
  
({
    onKeyUp: function(component, event, helper)
    {
        helper.doKeyUp(component, event);
    }
})

Helper.js
  
({
    doKeyUp: function(component, event)
    {
        // access the event object in the helper using getParam() or getParams()
        console.log(event.getParam('keyCode'));
        console.log(event.getParams().keyCode);
    }
})

http://​https://salesforce.stackexchange.com/questions/189788/what-key-is-pressed-in-lightning-component/189796

 
PatMcClellan__cPatMcClellan__c
Thanks, Alain. That's what I'll do -- use ui:textInput. I was hoping to keep it all lightning: but lightning:input is still beta. It really needs some additional events.

 
PatMcClellan__cPatMcClellan__c
This is what is working for me. Note that I had to make the updateOn = "keyup" so that the binding to "v.Message.Body__c" would update. Otherwise, it remained empty at the point where the keyCheck handler was called. That one stumped me for a while! 
<ui:inputText aura:id="body"
              class="input-field"
              label=""
              placeholder="Enter message..."
              updateOn="keyup"
              value="{!v.Message.Body__c}"
              keyup="{!c.keyCheck}" />

 
PatMcClellan__cPatMcClellan__c
@Alain, do you have any experience with ui:scrollerWrapper? I can't seem to make the scrollTo function work. If you have any insight, take a look at this thread (https://developer.salesforce.com/forums/ForumsMain?id=9060G000000MW6PQAW).
PatMcClellan__cPatMcClellan__c
I found another answer (thx to SFDCFOX on Stack Exchange). I'm able to keep my wrap my lightning:input inside a span, which has an onkeypress handler.
  
                 <span onkeypress="{!c.keyCheck}" class="slds-size--11-of-12">
                    <lightning:layoutItem size="12">
                        <lightning:input aura:id="body"
                                         label=""
                                         name="Body"
                                         placeholder="Enter message..."
                                         value="{!v.Message.Body__c}" />

                    </lightning:layoutItem>
                  </span>
And the handler: 
keyCheck : function(component, event, helper){
        if (event.which == 13){
            helper.onSend(component, event);
        }

    },
Note that since span isn't a lightning element, I had to use the slds class on it, rather than the simpler size attribute.
 
This was selected as the best answer
harish reddy 37harish reddy 37
<aura:component>
<div onkeyup="{! c.handleKeyUp }">
<lightning:input aura:id="enter-search" name="enter-search" label="Search when user hits the 'enter' key" type="search" />
</div>
</aura:component>

try this
Ken Koellner @ EngagewareKen Koellner @ Engageware
The ui:inputText tag example of works great and it's what I use but ui tags are going out of support.  I'd like to find substitute.  I haven't tried the solution of wrapping in a span or div with onkeyup on it.  What I I don't know is will the variable bound to the tag have the latest value or not.  I don't need to simply capture enter (13), I need to perform an action on every keystroke in order to perform a search so I need the latest field value on every keystroke.  It may be that it work with ui:inputText because of the updateOn="keyup".  If the variable isn't updated, the wrap solution willnot help.