jQuery InnerLabel is a module that creates "placeholder" text within textareas and text input tags. It extends the jQuery library.
-
Add
jquery.innerlabel.min.jsto your HTML file. -
Use the following code to bind InnerLabel to an element:
$( "textarea, input[type='text']" ).innerlabel( options );
- Very lighweight; only 2KB to load.
- No cost; Fully licensed for commercial and non-commercial use.
The parameter options is a JSON array that may use the following values:
| Option | Type | Default | Description |
|---|---|---|---|
| text | string / function | $(this).attr("title") |
The default placeholder text that you wish the field show when it is empty. If a function is passed, it will be executed every time this variable is recalled. |
| css | array | {} |
Any CSS styles that you wish to apply to the field while the placeholder is present. They will be removed when the field receives focus again. |
| onFocusIn | function | function() {} |
This function will be executed when the field receives focus, and the placeholder is present. Note: This function will execute before the placeholder is removed. |
| onFocusOut | function | function() {} |
This function will be executed when the field loses focus, and contains no text. Note: This function will execute before the placeholder is replaced. |