Skip to content

Provides a fallback for the placeholder property on input elements for older browsers.

License

Notifications You must be signed in to change notification settings

MSchmidt/mootools-form-placeholder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MooTools-Form-Placeholder

Provides a fallback for the placeholder property on input elements for older browsers.

Right now the placeholder property is only supported in Webkit browsers and Firefox 4. This plugin will bring it to all the other browsers and will do nothing in browsers with native support.

Screenshot

How to use

Include MooTools.Core and Form.Placeholder in your document

<script type="text/javascript" src="mootools-1.2.5-core-yc.js"></script>
<script type="text/javascript" src="Form.Placeholder-min.js"></script>

Define a placeholder on your input field and call Form.Placeholder with the ID of the field

<input type="text" id="statusupdate" name="statusupdate" placeholder="What's on your mind?" />

<script type="text/javascript" charset="utf-8">
	window.addEvent('domready', function() {
		new Form.Placeholder('statusupdate');
	});
</script>

Done!

You can have a look at the Examples folder for a complete working example.

Options

color - change the color of the placeholder text, defaults to #A9A9A9 (same as Chrome)

clearOnSubmit - whether the input field gets cleared when parent form is submitted, defaults to true

clearOnSubmit is used to simplify validation on the server-side. The input field will be cleared on submit and therefor you only need to check if the value of the field is blank. (rather than checking whether it equals the placeholder too).

new Form.Placeholder('statusupdate', {
	color: '#A9A9A9',
	clearOnSubmit: true
});

Changelog

  • 1.2 - 19.11.2010
    • support for password fields
    • fix issue where placeholder didn't work after a manual browser refresh
  • 1.1 - 08.10.2010
    • first complete release

Known issues

When a user enters the exact same text as the placeholder, the entered content won't be submitted.

Notes

Page on MooTools Forge: form_placeholder

Credits

Thanks to cpojer for the original implementation of MooTools-Form-Placeholder for MooTools 1.3

Thanks to the whole MooTools Team!

About

Provides a fallback for the placeholder property on input elements for older browsers.

Resources

License

Stars

Watchers

Forks

Packages

No packages published