12

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
9

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);
    }    
}
-1

Here is a working piece of Visualforce code to prevent tabbing out of a field. Maybe you can use it to your desired effect.

<apex:inputTextArea onkeydown="if(event.keyCode===9)
                               {var v=this.value,s=this.selectionStart,e=this.selectionEnd;
                               this.value=v.substring(0, s)+'\t'+v.substring(e);
                               this.selectionStart=this.selectionEnd=s+1;return false;}" rows="15" cols="100" value="{!scanList}"/>

What the script does within this input field: It captures the "tab" key press instead of tabbing out of the input field onto the next field it inserts a tab character into the field.

  • I can not use apex:X in my code but thanks anw – Simon Placentino Jan 12 '17 at 8:49
  • I was referring more to the JS within the apex....? Sorry I do not know enough about lightening to put the JS into lightning context. – NZ Dev Jan 12 '17 at 8:50
  • I note for the keyCode ty ;) – Simon Placentino Jan 12 '17 at 9:03

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.