Solved

Hilight the field with different color

Posted on 2012-04-02
3
299 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 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

636 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