Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Hilight the field with different color

Posted on 2012-04-02
3
Medium Priority
?
301 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 36

Accepted Solution

by:
mccarl earned 1500 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

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

660 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