Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

field


jHelp - context sensitive draggable form help

Submitted by RabidJay on August 5, 2010 - 2:44am

The jHelp plug-in provides easy to implement, draggable, context-sensitive help for your web forms.

Users can open the jHelp Panel by either clicking a Help Icon next to each field, or in I.E. by pressing the F1 key. jHelp automatically inserts the form's Help Icons and generates a Help Index.

jHelp sets the form focus to whichever field's Icon was clicked, displays the appropriate Help Text and, styles the selected field according to your CSS definition.

If the user leaves the panel open, the panel's help text is updated as the user moves from field to field.

Help Text you define is stored in an XML file and loaded by Ajax. The Help Panel CSS and HTML are fully cusomizable.

Add Clear

Submitted by skorecky on June 29, 2010 - 1:55pm

Add Clear is a jQuery plugin that adds a input clearing button on any input you apply it to. It clears the value, and returns focus to that field.

Clear the value of a form field (input field or textarea) when it's in focus

Submitted by stevemclintock on June 19, 2010 - 5:54pm

This function will clear the value of a form field (input field or textarea) when in focus (e.g "Enter your email address...") and remember the default value. If the field looses focus and the value is empty, the default value will be restored.

The function offers 2 optional parameters:
focus_color (A hexadecimal colour code to be used when the field is in focus)
blur_color (A hexadecimal colour code to be used when the field looses focus)

clearLabel

Submitted by codeincolor on March 15, 2010 - 3:42pm

This plugin takes care of hiding your labels and setting them as an input value. Perfect for search forms or short forms without breaking the usability for disabled people, screenreaders and non js-enabled browsers.

If you click the field the text disappears so that you can type your own input. If you leave the field blank and click elsewhere the original content is restored. If content was filled in by your application and it's not the same as your label text. Then it keeps that as a value without disappearing or taking it as a default value.

$(document).ready(function() {
    $('selector').clearLabel();
});

ztInputHint

Submitted by SilverSmurf on March 3, 2010 - 2:04pm

This Plugin add dummyfields to display hints for text- and password-input-fields.
The dummys will not be submit.

Or it can pick automatically an optional given attribute (default: title)
of the element so you can initiate a couple of fields with one line:

$("input").ztInputHint();

You can specify a hint for every element you want and/or set one of the optional settings:

$("input#username").ztInputHint({
   hint: 'User',
   sourceAttrib: 'alt',
   hintClass: 'icon'
});

Clear Form Field Value

Submitted by Stianjaco on November 7, 2009 - 7:27am

This is a super light weight plugin (only 20 lines an 661bytes. (No compression needed).
What does it do?
It removes the value of a text/password when the user focues on the field.
that's it...

How to use it
$(selector).clearfield();

Options
There are only one option, "not".
This will prevent input fields with a certain class-name to remove
the default value. This is great of you are using this plugin on a form
that fetches data from a database etc.
Example:

$('form').clearfield({not:'not-on-this'});
...
<input type="text" value="Loaded from db" class="not-on-this" />

SOURCE CODE:


// ClearField Plugin, Created by: Stian Jacobsen.
// Usage: $(selector).clearfield({not:'classname'});
$.fn.clearfield = function(options) {
var self = this;
options = jQuery.extend({not: 'not-on-this-one'}, options);

var clearfield = function() {

Field Watermark

Submitted by Nalum on October 31, 2009 - 2:03pm

Used to set the field default value to show or hide depending on whether the field has focus or not and whether the field has content other than the default.

Persist Helper Text

Submitted by NathanaelB on October 23, 2009 - 9:18am

The purpose of this plugin is to persist the display of helper text associated with a form field by rendering the helper text (the title attribute on the field) inside the field until the user wants to enter text into the field where the plugin then moves the text outside the form field until the user is finished. This keeps the form display clean, makes it obvious which helper text or prompts relate to which field and makes sure the helper text is always available to the user.

All you have to do is make sure the text fields you want to use this on have the class name "persist" and that the field has a title attribute with the helper text you want rendered. Also, put some bottom padding on your form rows to make space for the helper text otherwise it'll bounce the form around.

Field Selected

Submitted by willemarf on October 16, 2009 - 6:57pm

Changes the color field that the user is selected.

clearField

Submitted by donotfold on August 2, 2009 - 10:05am

This plugin takes care of your input fields.

Often used by opt-in input fields where the default value of the field is something like "Your e-mail address". If you click the field the text disappears so that you can type your e-mail address. If you leave the field blank and click elsewhere the original content is restored.

$(document).ready(function() {
    $('selector').clearField();
});

For more info please visit http://labs.thesedays.com/projects/jquery/clearfield/