Introducing jquery-input-replacement

Introducing jquery-input-replacement

I looked around for a good input text replacement plugin for jQuery but couldn’t find anything that did what I wanted so I created one myself. Learn how to use the plugin in this post.

I just released a new jQuery plugin on Google Code called jquery-input-replacement:

http://code.google.com/p/jquery-input-replacement/

The code performs a simple but useful function that I seem to always need so I decided to create a plugin that I (and others) could reuse.

Basically, the code replaces blank HTML form inputs with a string of text that is used to supply default values into the field. This is primarily used to give a field a default value, such as search fields. Below is a short little video showing what it does:

The plugin lets you define the field (or fields) that you want to apply the text to and (optionally) the CSS class to apply to the input when the text is applied to it.

When a user clicks on the field (when it gains “focus”), the CSS class gets removed and so does the initial text, allowing the user to enter in their content.

This can be used for search fields, login forms, and a number of other applications.

I hope the code is useful to someone out there and if you use it or have questions, feel free to post a comment or submit a bug to Google Code.

<object width=”174″ height=”252″> <param name=”movie” value=”http://content.screencast.com/users/woodman.dana/folders/Jing/media/485a2c24-b22d-4c15-97b3-2e95e0c1584a/jingh264player.swf”></param> <param name=”quality” value=”high”></param> <param name=”bgcolor” value=”#FFFFFF”></param> <param name=”flashVars” value=”thumb=http://content.screencast.com/users/woodman.dana/folders/Jing/media/485a2c24-b22d-4c15-97b3-2e95e0c1584a/FirstFrame.jpg&containerwidth=174&containerheight=252&showbranding=false&content=http://content.screencast.com/users/woodman.dana/folders/Jing/media/485a2c24-b22d-4c15-97b3-2e95e0c1584a/2009-08-11_1735.mp4″></param> <param name=”allowFullScreen” value=”true”></param> <param name=”scale” value=”showall”></param> <param name=”allowScriptAccess” value=”always”></param> <param name=”base” value=”http://content.screencast.com/users/woodman.dana/folders/Jing/media/485a2c24-b22d-4c15-97b3-2e95e0c1584a/”></param>  <embed src=”http://content.screencast.com/users/woodman.dana/folders/Jing/media/485a2c24-b22d-4c15-97b3-2e95e0c1584a/jingh264player.swf” quality=”high” bgcolor=”#FFFFFF” width=”174″ height=”252″ type=”application/x-shockwave-flash” allowScriptAccess=”always” flashVars=”thumb=http://content.screencast.com/users/woodman.dana/folders/Jing/media/485a2c24-b22d-4c15-97b3-2e95e0c1584a/FirstFrame.jpg&containerwidth=174&containerheight=252&showbranding=false&content=http://content.screencast.com/users/woodman.dana/folders/Jing/media/485a2c24-b22d-4c15-97b3-2e95e0c1584a/2009-08-11_1735.mp4″ allowFullScreen=”true” base=”http://content.screencast.com/users/woodman.dana/folders/Jing/media/485a2c24-b22d-4c15-97b3-2e95e0c1584a/” scale=”showall”></embed> </object>

Published November 9th, 2009 by Dana Woodman in Announcements
Tags ,
Comments 1 Comment »

  1. Pierre 10:38 am @ May 5th, 2010   #

    Hello, I used this good plugin and I have fix some bugs. - I replaced “class” by “prefocus_class” line : 13, 14, 21, 22, 29, 30. - I replaced “obj.val() = ”;” by “obj.val(”);” line : 46. - I removed “return false;” line : 48. Apart from that, this plugin is great.