HTML - forms - placeholder

by scheinercc

HTML

<!doctype html>  
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Basic HTML5 Template</title>
    </head>
    <body>

        <form id="userDetails" action="">
            <fieldset>
                <legend>Personal Details</legend>
                <div class="form-item">
                    <input id="firstName" type="text" placeholder="First name">
                </div>
                <div class="form-item">
                    <input id="lastName" type="text" placeholder="Last name">
                </div>
                <div class="form-item form-item-type-2">
                    <input id="submit" type="submit" value="Submit">
                </div>
            </fieldset>
        </form>

    </body>
</html>

CSS

html {
  font: 14px/1.4em sans-serif;
}

.form-item { 
    margin-bottom: 1em;
    padding: .5em;
    background-color: #ddd;
    border-radius: 3px;
}

.form-item-type-2 {
    margin-bottom: 0;
    display: inline;
}

JavaScript

/* fallback script based on jQuery */
$(document).ready( function() {
    
    /* **
    * check for 'placeholder' support
    * alternative if using modernizr: 'Modernizr.input.placeholder'
    */
    if ( !( 'placeholder' in document.createElement('input') ) ) {
        
        $('[placeholder]')
            // remove placeholder value on focus
            .on( 'focus', function() {
            
                var input = $(this),
                    placeHolderText = input.attr('placeholder');
                
                if ( input.val() === placeHolderText ) {
                    
                    input.val('');
                    input.removeClass('placeholder');
                }
            })
            // add placeholder text on blur if no individual value is set
            .on( 'blur', function() {
                
                var input = $(this),
                    placeHolderText = input.attr('placeholder');
                
                if ( input.val() === '' || input.val() === placeHolderText ) {
                    
                    input.addClass('placeholder');
                    input.val(placeHolderText);
                }
            })
            // initiate placeholder text
            .blur();
        
        // remove placeholder text on submit
        $('[placeholder]')
            .parents('form')
            .submit( function() {
                $(this)
                    .find('[placeholder]')
                    .each( function() {
                        
                        var input = $(this),
                            placeHolderText = input.attr('placeholder');
                        
                        if ( input.val() === placeHolderText ) {
                            input.val('');
                        }
                    });
            });
    }
});