Hilight the field with different color

Dear Experts,

I want to implement a utility in my application, that is, the field has to be hilighted with different color, if the cursor is presented in that field,
if i click on one text field it should be in different color, if i tab out from that field it should be remain in the previous color.

i implemented the same with onblur attribute, but it is not firing my actual validators, and also we need to  add the logic to all the fields in all the pages.

So Please advise me , how I can  achieve this dynamically, i.e
need not to add the code in all the fields. and it should not effect my actual business(validators).

Kindly Help me.
BhanuSVSAsked:
Who is Participating?
 
mccarlIT Business Systems Analyst / Software DeveloperCommented:
Depending on the level of browser compatibilty that you are going for, I can see that you have 2 options.

CSS - Using :focus selector (not supported in older browsers)
input:focus {
    background-color: green;
}

Open in new window


or

jQuery - To apply event handlers to multiple elements easily
<script type="text/javascript" src="/scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function() {
   $(".textInputField")
      .focusin(function() {
         $(this).css("background-color", "green");
      })
      .focusout(function() {
         $(this).css("background-color", "white");
      });
});
</script>

...

<input name="field1" class="textInputField">
<input name="field2" class="textInputField">

Open in new window

0
 
BhanuSVSAuthor Commented:
But in my application, i mapped suggestionlist(LOV) to the text fields by using rich faces(rich:suggestionbox),
if i am using the above approach, the suggestion list is not working,

please help me.
0
 
BhanuSVSAuthor Commented:
Thanks for your solution, but it has limitations which i mentioned in my next comment, it would have better if you provide solution for this.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.