14

I have a lightning:input and when the focus is on it and you type the enter stroke: it refreshes the page.

I tried to prevent it by implementing the onchange: avoid the event to be fire but the callback is never launched.

Component.cmp:

<lightning:input
  type="email"
  onchange="{! c.callbackNeverCalled }"
/>

Controller.js:

callbackNeverCalled: function(component, event, helper) {
  event.preventDefault(); // Does not prevent from refreshing/redirecting the page & also 'deprecated'.

  event.getSource().getParams(); 
  // Is an empty object but the good way to do (cf. documentation)
}
  • Ok i checked the documentation of the lightning input and there is no onkeyup event. If you can add javascript to your page. Here's a solution I found. – Martin Lezer Jan 12 '17 at 8:55
  • My callback for the onchange event is now working. But there are still two issues: event.preventDefault() do not prevent from refreshing/redirecting the page and I can access the keyup by doing event.getSource().getElement().KEYUP (this will be deprecated, displayed at usage for event.getSource().getParams() but this does not return anything other than an empty object at the moment). – Simon Placentino Jan 12 '17 at 18:01
  • event.KEYUP give us this message: Avoid relying on the native event attribute KEYUP as it is only included for backwards-compatibility. It will eventually be deprecated. Use the aura event API (e.g., getSource(), getParams(), etc) instead. – Simon Placentino Jan 12 '17 at 18:12
  • Still not fixed.. – Simon Placentino Jan 22 '17 at 10:12
  • @SimonPlacentino Are you putting your lightning:input in a form? This is typically not how you'd write a component/app. – sfdcfox Feb 17 '18 at 16:22
14

Thanks to SFDCFOX and PatMcClellan__c. Workaround is:

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

keyCheck : function(component, event, helper){
    if (event.which == 13){
        helper.onSend(component, event);
    }    
}
|improve this answer|||||
0

In LWC this works as

<span onkeypress={keycheck}>
    <lightning-input label="input1" data-fieldapiname="Name">
    </lightning-input>
</span>

 keycheck(component, event, helper){
    if (component.which == 13){
        // call the js method i.e. this.handlerfilter();
    }
}
|improve this answer|||||

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.