Skip to Menu
jQuery » focus fields

Add an outline and background to text inputs when they are given focus. Does not work with jQuery 1.2 at the moment, only 1.0 and 1.1)

This plugin is available for download via jQuery SVN

Parameters

  • oColour - Outline colour
  • oWidth - Outline width
  • bgColour - Background colour
  • textColour - Text Colour

Examples

  • Default settings: $("input.text, textarea.text").focusFields()
  • Different outline color: $("input.text, textarea.text").focusFields("#f0f")
  • Different width: $("input.text, textarea.text").focusFields(null, 6)
  • Different background and text colour: $("input.text, textarea.text").focusFields(null, null, "#00f", "#0ff")

Test Form

Click one of the examples above then click one of the fields below:

Limitations

If the fields aren't given a border, they will get an inset one if a background colour is applied via the plugin. So to prevent this from happening, you could simple have this in your stylesheet. Also, Opera applies a tranparent background, so you may want to add a white background as well.

 input.text, textarea.text {
	border: 1px solid #000;
	background: #fff;
}

And apply the class 'text' to any elements this plugin is applied to.