By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,481 Members | 1,713 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,481 IT Pros & Developers. It's quick & easy.

Textarea change css style onfocus, and change back onblur?

kestrel
Expert 100+
P: 1,071
i have a form, and i want to change the forms css class onfocus, then change back onblur...

how can i do this?
Aug 26 '06 #1
Share this Question
Share on Google+
2 Replies


PLA
P: 44
PLA
The DOM element 'form' has not hte onfocus nor the onblur event handler, so you have to write it on each HTML element in the form, ie:

<form action="" method="" name="formname" class="S0">
...
<input type="text" onfocus="formname.className='S1';" onblur="formname.className='S0';">
...
</form>
Aug 28 '06 #2

P: 1
I was browsing around looking on achieving the same thing, however, I might be reading it wrong, but I think you might be looking to change different elements in the form onfocus. What 'PLA' submitted is absolutely right and it helped me to achieve exactly what I wanted to do which was change the textbox background image onfocus (Thanks by the way!).

Here's what I came up with:

Expand|Select|Wrap|Line Numbers
  1. <form id="register" name="register" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
  2.   <table border="0" cellpadding="0" cellspacing="0">
  3.     <tr>
  4.       <td colspan="2" align="center" class="header">Registration</td>
  5.     </tr>
  6.     <tr>
  7.       <td align="right"><strong>First Name:</strong>&nbsp; </td>
  8.       <td align="center"><input name="fname" type="text" class="item" id="fname" size="15" onfocus="fname.className='textInputBack';" onblur="fname.className='item';" /></td>
  9.     </tr>
  10.     <tr>
  11.       <td align="right"><strong>Last Name:</strong>&nbsp; </td>
  12.       <td align="center"><input name="lname" type="text" class="item" id="lname" size="15" onfocus="lname.className='textInputBack';" onblur="lname.className='item';"  /></td>
  13.     </tr>
  14.     <tr>
  15.       <td align="right"><strong>Username:</strong>&nbsp; </td>
  16.       <td align="center"><input name="username" type="text" class="item" id="username" size="15" onfocus="username.className='textInputBack';" onblur="username.className='item';"  /></td>
  17.     </tr>...you get the idea...
In the class: textInputBack, I have the background set as:
Expand|Select|Wrap|Line Numbers
  1. 'background: #030303 url(images/formButtons/backAni2.gif) repeat-x'
and in the class: item, is my normal background:
Expand|Select|Wrap|Line Numbers
  1. 'background: #030303 url(img/bgitem.gif) repeat-x'
Not sure how I pulled it off...I'm a PHP guy just getting started in javascript, but it definately works without errors!

Thanks again to PLA for posting that...been to about 100 sites browsing around in Google trying to get this to work...everyone else making it much more difficult than it was!
Jan 7 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.