HintValue

Intro

HintValue is a prototype based class that gives your text/password fields or your textareas a default value. If the user clicks on the element the default value is removed and the use is ready to type. Just have a look at the demos.

Features

• determines the default value or you can set your own default value
• the value is removed if the user clicks on the element or tabs into it
• if the user leaves the field empty the default value is filled in again
• Use it on text inputs, password fields or textareas

Demos

Here are some demo fields with a HintValue

HTML:
<input type="text" name="name" id="text" />
CSS:
.empty { color:#ccc; text-align:center; }
JS:
new HintValue('text', { defaultValue: "Name" });
  

HTML:
<input type="text" name="name" id="text2" value="default value" />
CSS:
.default { color:#ccc; }
JS:
new HintValue('text2', { defaultClassName: "default" });
  

Installation

HintValue is build upon the JavaScript framework Prototype. You can grab it here or include it directly via the Google AJAX Libraries API. Just include Prototype and hintvalue.js

It's as simple as this:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js'></script>
<script type='text/javascript' src='/hintvalue.js'></script>

How to use HintValue

For each input/textarea that you want a hint/default value just call HintValue:

 // call it with the id of your input/textarea
new HintValue('id_of_element');
// or call it with an element as parameter
var element = $('myinput');
new HintValue(element);

If you want your input/textarea to look differently when the default/hint value is displayed you can use the ".empty" css-class. HintValue automatically adds the ".empty" class to the element when the default value is displayed:

new HintValue('id_of_element');
      //CSS:
      .empty { color:#ccc; text-align:center; }

With the "className" option you can use any other classname for this, like so:

new HintValue('id_of_element', {className: "default_value");
      //CSS:
      .default_value { color:#ccc; text-align:center; }

By default HintValue takes the value-attribute of your input and takes this text as the default value. For people with deactivated JavaScript this is not optimal. They would have to remove the default value by hand. If you leave your value-attribute empty and use the "value" option, HintValue automatically inserts this as the defaultValue:

new HintValue('id_of_element', {value: "This text get's inserted");

Just have a look at the source code of the demos above.

HintValue options and API

HintValue takes two parameters. The first is expected to be an ID of a textbox/input or the element itself. The second is an option hash:

new HintValue('id_or_element', {
	value: false,
	className: "empty"
});

Options

new HintValue('id_or_element', {value: 'defaultvalue'});

new HintValue('id_or_element', {className: "xyz"});
new HintValue('id_or_element', {className: "default", value:"type here"});

License

Download

Contact