MooTools

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.

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.