Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
This simple plugin provides HTML 5 placeholder attribute to all browsers.
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
Source
README.md
package.yml
screenshot.png

README.md

MooTools-Placeholder

This simple plugin provides HTML 5 placeholder attribute to all browsers.

Screenshot

How to use

Simple usage by setting placeholder color in options:

<script type="text/javascript" src="/js/placeholder-min.js"></script>
<script type="text/javascript">
    $(window).addEvent('domready', function(){
        new NS.Placeholder({
            color: '#ccc'
        });
    });
</script>

By default NS.Placeholder adds 'placeholder' class:

<style type="text/css">
    .my-placeholder {
        color: #ccc;
    }
</style>

<script type="text/javascript" src="/js/placeholder-min.js"></script>
<script type="text/javascript">
    $(window).addEvent('domready', function(){
        new NS.Placeholder({
            cssClass: 'my-placeholder'
        });
    });
</script>

You can set your elements collection to check ($$('input[type=text]') by default):

<script type="text/javascript">
    $(window).addEvent('domready', function(){
        new NS.Placeholder({
            elements: $$('.input-search')
        });
    });
</script>

...or just use string selector:

<script type="text/javascript">
    $(window).addEvent('domready', function(){
        new NS.Placeholder({
            elements: '.input-search'
        });
    });
</script>

For perfomance reasons you can enable effect for a single element:

<script type="text/javascript">
    $(window).addEvent('domready', function(){
        new NS.Placeholder({
            elements: $('searchBox')
        });
    });
</script>

Copy-paste integration:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="http://github.com/phpinfo/MooTools-Placeholder/raw/0.4.1/Source/placeholder-min.js"></script>
<script type="text/javascript">
    $(window).addEvent('domready', function(){
        new NS.Placeholder({
            color: '#ccc'
        });
    });
</script>

Thanks to

Thanks to Nikita Vasilyev for his genius solution: http://github.com/NV/placeholder.js. Thanks to Arian Stolwijk for some MooTools experience: http://github.com/arian/MooTools-Placeholder.

Something went wrong with that request. Please try again.