lightning:input help -- keyCode

Question

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}"/>

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?

Answer 1

lightning:input does a bunch of validation and other stuff, but doesn't appear to support basic events other than blur, focus, and change events. However, if you want to add some basic key detection, you can use a wrapper element:

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

You can then check which to determine the Enter key:

keyCheck: function(component, event, helper){
    if(event.which == 13) {
        console.log("Enter detected!");
    } 
}

Answer 2

A refinement to the keyCheck function can be found at https://developer.salesforce.com/docs/component-library/bundle/lightning:input/example#lightningcomponentdemo:exampleInputSearch where a queryTerm is prepared ready for further action (e.g. a search function).