Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 306
  • Last Modified:

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.
0
BhanuSVS
Asked:
BhanuSVS
  • 2
1 Solution
 
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.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now