jQuery enablePlaceholder plugin DEMO

Sturdy and lightweight jQuery plugin to gracefully enable HTML5 placeholder functionality in older browsers. And if it's no enough robust, it should be; any problem or inconsistence you find in this demo, please add a new issue on the github project: https://github.com/marioizquierdo/enablePlaceholder

by tothemario

HTML

<script src="https://raw.github.com/marioizquierdo/enablePlaceholder/master/src/jquery.enablePlaceholder.js"></script>
<h1>jQuery EnablePlaceholder Demo</h1>
<p>
    EnablePlaceholder is a lightweight and sturdy jQuery plugin to gracefully enable HTML5 placeholder functionality in older browsers.
</p>
<p>
    If this is not robust enough, it should be; any problem or inconsistence you find in this demo, please add a new issue on <a href="https://github.com/marioizquierdo/enablePlaceholder">the github project</a>. Feedback is appreciated.
</p>

<h2>Form elements with placeholders</h2>

<form action="#">
    <p>
        <b>Runtime Info:</b> 
        <span id="info">JavaScript disabled. EnablePlaceholder plugin not used.</span>
    </p>
    <p>User Name:<br/>
        <input type="text" placeholder="Enter your username" name="username"/></p>
    
    <p>Password:<br/>
        <input type="password" placeholder="Type your password" name="password"/></p>
    
    <p>Description:<br/>
        <textarea placeholder="Something about yourself..." name="description"></textarea></p>
</form>

<h2>Source</h2>
<ul>
    <li><a target="_blank" href="https://github.com/marioizquierdo/enablePlaceholder">Github Project</a></li>
    <li><a target="_blank" href="http://plugins.jquery.com/project/EnablePlaceholder">jQuery Plugins project</a></li>
</ul>

CSS

body { font: 0.75em helvetica,arial,sans-serif; padding: 2em; }
h1 { font-size: 1.5em; margin-bottom: .5em; }
h2 { font-size: 1.2em; margin: 1em 0 .5em 0; }
p  { color: #666; margin-bottom: .5em; }
form { padding: 1em; border: 2px dashed #ccc; }
form p { margin-bottom: 0.5em; }

input, 
textarea { 
    color: #474;
    padding: .4em;
}

/* Match html5 placeholder elements */
/* and the .placeholder class added by the plugin */
::-webkit-input-placeholder { color: #daa; }
:-moz-placeholder { color: #daa; }
.placeholder  { color: #daa; }

JavaScript

jQuery(function($) {

    // Enable placeholder
    $('input[placeholder], textarea[placeholder]').enablePlaceholder();

    // Update #info with current status
    if (jQuery.support.placeholder) {
        $('#info').text('HTML5 placeholder is nativelly supported by this browser. EnablePlaceholder plugin is not being used.');
    } else {
        $('#info').text('Placeholder not supported by this browser. EnablePlaceholder plugin used to simulate the placeholder behavior.');
    }

});