Javascript onfocus in Forms

A nice feature to use with javascript in your forms, is a way to show the currently selected field. When a viewer is in a particular input field it will select that field however you would like – i.e. A border or background color change.

Here is a basic html/js for changing the border:

[code lang=”html”]


onfocus: The input changes to a 2px size border on the focus.

onblur: The input changes back to default – 1px size border.

That is how you can simply change the border. However you may want to change other features, or maybe many features at once. For this I recommend using “this.className”. That way you can specify a new class all together and change many appearances.

[code lang=”html”]


Now when it is selected it will change background color, border, and font weight. You can specify any style changes in the classes in css.

You can see functional examples of these here.

Filed under: Web ProgrammingTagged with: , ,


  1. i really like your blog do u write your own posts or you outsource the work to someone else. because i have a couple of blogs and i have a really hard time updating all of them.


  2. Hello, just found you through AOL. The site looks great and i’ll be sure to come back regularly.

  3. Love your writing and knowledge. If you ever started a $1/month membership blog, I would join in a heart beat even if you wrote 2-3 blogs a month.

  4. Keep up the good work. I just recently found your site/blog and I would hope that there are more people like you, out there. Now, back to reading….

  5. “I typically don’t article in Weblogs but your blog site pressured me to, wonderful function.! lovely …”

Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *