Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Placeholder adds support for the 'placeholder' input attribute in older browsers.
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
dist
js
tasks
test
.gitignore
.travis.yml
AUTHORS
README.md
component.json
grunt.js
package.json

README.md

Placeholder

Build Status

Placeholder adds support for the "placeholder" input attribute in older browsers.

Features

  • Takes the label of form field (input.text or textarea) and uses it as that field's temporary default value.
  • Clears the temporary value when the form field is in focus
  • If the user clear the text of the field, when the user leaves the field the temporary value reappears
  • Optionally you can keep the label from being removed (check the api for more details)
  • If the field has already a default value than that value will be used, instead of the temporary label, but the label if exists will be removed.
  • When the form is submitted the temporary labels that weren't changes will be replaced with the fields original value, or empty if the field didn't have a default value.

Dependencies

Usage

To use the application in your project follow the instructions below:

  1. Include dist/placeholder.min.js.

  2. Add the placeholder attribute to your form elements:

    <input type="text" name="name" placeholder="Your Name" />
    <textarea name="message" placeholder="Write a message"></textarea>
    
  3. Instantiate the app:

    $(function () {
        placeholder = new Placeholder();
    });
    

Developing

Install node.js and npm.

Running tests

Run the following from the placeholder directory.

npm install
open test/index.html

Or run the tests in a PhantomJS instance.

brew install phantomjs
grunt mocha

Distribution

grunt
Something went wrong with that request. Please try again.