Placeholder
adds support for the "placeholder" input attribute in older
browsers.
- 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.
- jQuery 1.7+
To use the application in your project follow the instructions below:
-
Include
dist/placeholder.min.js
. -
Add the
placeholder
attribute to your form elements:<input type="text" name="name" placeholder="Your Name" /> <textarea name="message" placeholder="Write a message"></textarea>
-
Instantiate the app:
$(function () { placeholder = new Placeholder(); });
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
grunt