Solved

Hilight the field with different color

Posted on 2012-04-02
3
291 Views
Last Modified: 2012-04-14
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.
0
Comment
Question by:BhanuSVS
  • 2
3 Comments
 
LVL 35

Accepted Solution

by:
mccarl earned 500 total points
ID: 37799567
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
 

Author Comment

by:BhanuSVS
ID: 37804603
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
 

Author Closing Comment

by:BhanuSVS
ID: 37846315
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

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This video teaches users how to migrate an existing Wordpress website to a new domain.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now