MooTools-Placeholder 0.4.3

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



Details

Author
Alexey Gromov
Current version
0.4.3
GitHub
phpinfo/MooTools-Placeholder
Downloads
14487
Category
Forms
Tags
Report
GitHub Issues

Releases


Dependencies

  • core/1.2.4: *

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.

blog comments powered by Disqus