I have a input field in lightning component and I'm struggling with two requirements. Autofocus - after page is loaded and on Enter key I want to trigger function.

I can handle those requirement separately, but
1) <lightning:input name="xxx" label="xxx" aura:id="searchInput" onchange="{!c.change}"/>

change: function(component, event, helper){

is always undefined

2) <ui:inputText aura:id="searchInput" ... is not working with

        }, 100);

I know that lightning:input is still in beta, but do you have any idea how to solve both requirements?


Find the logic below to trigger function on "ENTER" key

<ui:inputText class="form-control" aura:Id="todoText" required="true" value="" keypress="{!c.onHitEtter}" updateOn="keypress"/>

In Controller:

onHitEtter : function(component,event) {

        if(event.getParams().keyCode === 13) {
            //your logic here;
  • thanks, but I have the code there. I also need automatic focus on that input field, when the page is loaded (I have 2 requirements) – Karel L Nov 21 '17 at 7:10

For the Focus is seams like you are really close. I do about the same and it works for both. (Remember to specify type for the lightning input!).

<ui:inputText aura:id="testInput" />
<lightning:input label="testInput" name="test" aura:id="testInput" type="text"/>
doInit : function(component, event, helper){
     }, 500);

Remember that you need to do this after the assets have been loaded so adding this to an aura:handler function or and initiation function is optimal.

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.