Tag: onfocus

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”]


[/code]

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”]


[/code]

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: , ,