Skip to content

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

Notifications You must be signed in to change notification settings

trapeze/placeholder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published