Page 1 of 1

Jquery - add class on focus and remove on blur

Posted: Thu Feb 15, 2007 6:05 pm
by Luke
I am trying to use jquery to give internet explorer the :focus ability on text inputs... so I'm using this:

Code: Select all

    $(function(){
        $(".text").focus(function(){
            $(this).addClass('text_focus');
        }).blur(function(){
            $(this).removeClass('text_focus');
        });
    });

Code: Select all

.text_focus
{
	background-image: none;
	background-color: white;
	color: inherit;
	border: 1px solid #84C342;
}
and I wrap it in <![If IE]--> but for some reason this doesn't work. If I put an alert('FOOEY!'); within the function, it alerts when I focus on the input, but it WILL NOT add the class... why?

Posted: Thu Feb 15, 2007 6:58 pm
by nickvd
Does it work without the CC?

Posted: Thu Feb 15, 2007 7:00 pm
by Luke
what is "the CC"?

Posted: Thu Feb 15, 2007 7:08 pm
by nickvd
Heh, sorry, CC = Conditional Comment (the <![If IE]-->)

Posted: Thu Feb 15, 2007 7:10 pm
by Luke
No

Posted: Thu Feb 15, 2007 7:15 pm
by nickvd
What version of IE did you test it with?

Posted: Thu Feb 15, 2007 7:31 pm
by nickvd
I just tried the following code on Firefox, IE7 and IE6, and all three worked perfectly.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, http://www.pspad.com">
  <title>junk</title>
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script>

<!--[If IE]>
<script type="text/javascript">
 $(function(){
   $(".text").focus(function(){
      $(this).addClass('text_focus');
   }).blur(function(){
      $(this).removeClass('text_focus');
   });
});
</script>
<![endif]-->
<style type="text/css">
input:focus, .text_focus
{
        background-image: none;
        background-color: white;
        color: inherit;
        border: 1px solid #84C342;
}
</style>
  </head>
  <body>
   <input type="text" class="text" value="textbox"/><br/>
   <input type="text" class="text" value="textbox"/><br/>
   <input type="text" class="text" value="textbox"/><br/>
   <input type="text" class="text" value="textbox"/><br/>
   <input type="text" class="text" value="textbox"/><br/>
   <input type="text" class="text" value="textbox"/><br/>
   <input type="text" class="text" value="textbox"/><br/>
   <input type="text" class="text" value="textbox"/><br/>
  </body>
</html>
However, I would use a different method (that jquery provides) to tune it to ie.

Code: Select all

 $(function(){
   if ($.browser.msie) {
      $(".text").focus(function(){
         $(this).addClass('text_focus');
      }).blur(function(){
         $(this).removeClass('text_focus');
      });
   }
});

Posted: Fri Feb 16, 2007 1:30 am
by Kieran Huggins
I don't think class names like underscores... try using camel case instead: "textFocus"