Textarea Placeholder with Newlines

textareaPlaceholderNewlines.css

textarea.placeholder {  
        color: #aaa;            
}

textareaPlaceholderNewlines.html

<textarea placeholder="key,val
key,val
key,val"></textarea>

textareaPlaceholderNewlines.js

/**
 * Allows the use of placeholder text that includes new lines in textareas.
 *
 * @author: Ben Dechrai <[email protected]>
 * @readme: https://bendechrai.com/2013/04/03/textarea-placeholder-with-new-lines/
 * @licence: http://opensource.org/licenses/MIT
 */
function textareaPlaceholderNewlines() {

        $('textarea[placeholder*="\n"]').each(function(){

                // Store placeholder elsewhere and blank it
                $(this).attr('data-placeholder', $(this).attr('placeholder'));
                $(this).attr('placeholder', '');

                // On focus, if value = placeholder, blank it
                $(this).focus(function(e){      
                        if( $(this).val() == $(this).attr('data-placeholder') ) {
                                $(this).attr('value', '');
                                $(this).removeClass('placeholder');
                        }               
                });                     

                // On blur, if value = blank, insert placeholder
                $(this).blur(function(e){
                        if( $(this).val() == '' ) {
                                $(this).attr('value', $(this).attr('data-placeholder'));
                                $(this).addClass('placeholder');
                        }
                });             

                // Call blur method to preset element - this will insert the placeholder
                // if the value hasn't been prepopulated
                $(this).blur();
        });

}