Jquery - add class on focus and remove on blur

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Jquery - add class on focus and remove on blur

Post 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?
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Does it work without the CC?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

what is "the CC"?
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Heh, sorry, CC = Conditional Comment (the <![If IE]-->)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

No
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

What version of IE did you test it with?
Last edited by nickvd on Thu Feb 15, 2007 7:31 pm, edited 1 time in total.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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');
      });
   }
});
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

I don't think class names like underscores... try using camel case instead: "textFocus"
Post Reply