3

We are trying to implement Re-Confirm email id functionality, to capture email address twice on the form. For this on the second email address field we want to restrict paste action by user.

We are trying to leverage 'Paste' event available for ui:inputEmail tag.

Component Code:

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global" >

    <aura:attribute name="confirmEmail" type="String" />

    <ui:inputEmail aura:id="confirm_email" label="confirm_email" class="slds-input" value="{!v.confirmEmail}"  paste="{!c.stopPasteEvent}"/>

</aura:component> 

Controller Code:

({
    stopPasteEvent : function(component, event, helper) {

        alert('** fired paste event ');
        var selectedFieldName =event.getSource().get("v.label");
        var selectedFieldValue = component.find(selectedFieldName).get("v.value");
        component.find(selectedFieldName).set('v.value', null);

    }
})

We even tried setting the attribute to null directly with below approach

component.set("v.confirmEmail", null);

and

component.set("v.confirmEmail", "");

None of these options are working, the event is getting fired perfectly and the alert is coming, but when we tried to set the attribute to null it is not giving any effect and paste is happening.

Is there any other approach to restrict paste in lightning input fields?

  • try setting it as - component.set("v.confirmEmail", ""); OR you can go ahead with using JQuery paste event to restrict default behavior $('#emailInput').bind("paste",function(e) { e.preventDefault(); });. – Sikha Baid Oct 23 '17 at 13:21
  • @SikhaBaid thanks for input, tried this component.set("v.confirmEmail", ""); but no luck , trying to implement jquery approach, will post back the result – rajasekhar Oct 23 '17 at 13:30
  • Related: ux.stackexchange.com/questions/21062 – sfdcfox Oct 23 '17 at 14:32
  • Summary of above link: don't ask for the email field twice. You'll annoy your users and reduce adoption/conversion rates. This is 2017; nobody types email addresses anymore, they all use auto-complete features that are standard in every browser. In fact, don't even ask for the email twice. It's no longer necessary. – sfdcfox Oct 23 '17 at 14:35
3

The Event object passed in Lightning has a .preventDefault() method. However upon testing it does not appear to work for the paste event. So it would seem to me that Locker Service prevents you from preventing it.

Ultimately, because you're working within an event handler, any attempt to blank the value out will happen first, before the event is finished bubbling. Then the event completes and the paste proceeds. That's why that approach was not working for you.

  • Thanks Charles, do you see any other workaround to prevent this. – rajasekhar Oct 24 '17 at 6:26
  • I'm facing a similar problem. Have you found a solution to this? – SGj Sep 9 at 9:13

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.