+ Start a Discussion
Niraj Singh 28Niraj Singh 28 

onblur is not working in lightning component

Hello,

I have needed to write onblur event of div which is desingned to have a background image But this is not working.If some one have implemented this functionality then please share me.
Best Answer chosen by Niraj Singh 28
Deepali KulshresthaDeepali Kulshrestha
Hi Niraj,

You can not use onBlur on the div but you can use "onmouseout" event on it.

<aura:component >
    <p style="width: 100%; float:left; background-color: #000000;" onmouseout="{!c.bluractionJs}"> Test  </p>
</aura:component>

bluractionJs : function(component, event, helper) {
          alert('blur');                
    }
    
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha

All Answers

Khan AnasKhan Anas (Salesforce Developers) 

Hi Niraj,

Greetings to you!

Please refer to the below links which might give you an idea of how to use onblur.

https://salesforce.stackexchange.com/questions/163381/how-to-add-onblur-events-in-div-tags-in-lightning-component

https://salesforce.stackexchange.com/questions/148369/click-outside-of-popover-to-hide

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

Manvendra Chaturvedi 26Manvendra Chaturvedi 26
Hi Niraj,

You can call "showSpinner" and "hideSpinner" method as per your requirement

<div class="slds-m-around_xx-large">
    <lightning:spinner aura:id="mySpinner" style="position: fixed!important;" alternativeText="Processing.." title="Processing.." variant="brand" size="large" class="slds-show"/>
</div>

showSpinner: function (component, event, helper) {
    console.log('show spinner');
    var spinner = component.find("mySpinner");
    console.log('spinnerspinner-='+spinner);
    $A.util.removeClass(spinner, "slds-hide");
    $A.util.addClass(spinner, "slds-show");
},

hideSpinner: function (component, event, helper) {
    console.log('hide spinner');
    var spinner = component.find("mySpinner");
    $A.util.removeClass(spinner, "slds-show");
    $A.util.addClass(spinner, "slds-hide");
},
 
Deepali KulshresthaDeepali Kulshrestha
Hi Niraj,

You can not use onBlur on the div but you can use "onmouseout" event on it.

<aura:component >
    <p style="width: 100%; float:left; background-color: #000000;" onmouseout="{!c.bluractionJs}"> Test  </p>
</aura:component>

bluractionJs : function(component, event, helper) {
          alert('blur');                
    }
    
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
This was selected as the best answer