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"