function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Flint LockwoodFlint Lockwood 

Highlight Changed Input Field

How do I highlight a input field whose value was changed in Lightning (note: I am using the <aura:iteration> tag). Using the sample code below, I want to highlight the field using CSS style (box-shadow: 0 0 10px #ff6600;) whenever the Opportunity name is updated. 
<aura:iteration items="{!v.opportunityList}" var="oppty">
            <ui:inputText value="{!oppty.Name}"/>
</aura:iteration>

 
Best Answer chosen by Flint Lockwood
sfdcMonkey.comsfdcMonkey.com
and with the locker service you can do it by below code 
<aura:iteration items="{!v.opportunityList}" var="oppty">
            <ui:inputText value="{!oppty}" change="{!c.changes}" />
     </aura:iteration>
changes : function(component,event,helper){
     //   alert(event.getSource());
        var whichOne = event.getSource();
        $A.util.addClass(whichOne, "myClass");
     
    }
css 
.THIS .myClass {
    
   box-shadow: 10px 10px 5px red;
}
let me inform if it helps you
thanks


 

All Answers

sfdcMonkey.comsfdcMonkey.com
hi Fllnt Lockwood
try below code 
<aura:iteration items="{!v.opportunityList}" var="oppty">
            <ui:inputText value="{!oppty}" change="{!c.changes}" />
     </aura:iteration>
js controller 
changes : function(component,event,helper){ 
        var changeInputEvent = event.getSource().getElement();
        changeInputEvent.style.boxShadow = '0px 0px 10px red'
    }
let me inform if it helps you.
thanks


 
Flint LockwoodFlint Lockwood
event.getSource doesn't have the getElement function.
User-added image
 
sfdcMonkey.comsfdcMonkey.com
hi
This is a known issue with LockerService. Even though your element is inside an iteration, it should still return a SecureComponent instead of a SecureComponentRef as you've discovered.
if you disable locker service its work.
https://success.salesforce.com/issues_view?id=a1p3A00000183rMQAQ
thanks
 
sfdcMonkey.comsfdcMonkey.com
and with the locker service you can do it by below code 
<aura:iteration items="{!v.opportunityList}" var="oppty">
            <ui:inputText value="{!oppty}" change="{!c.changes}" />
     </aura:iteration>
changes : function(component,event,helper){
     //   alert(event.getSource());
        var whichOne = event.getSource();
        $A.util.addClass(whichOne, "myClass");
     
    }
css 
.THIS .myClass {
    
   box-shadow: 10px 10px 5px red;
}
let me inform if it helps you
thanks


 
This was selected as the best answer
Flint LockwoodFlint Lockwood
Thanks!! Great solution! I tried using component.find. That's where I went wrong.