What you could do is add the text as value, which respects the line break \n.
$('textarea').attr('value', 'This is a line \nthis should be a new line');
Then you could remove it on focus and apply it back (if empty) on blur. Something like this
var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);
$('textarea').focus(function(){
if($(this).val() === placeholder){
$(this).attr('value', '');
}
});
$('textarea').blur(function(){
if($(this).val() ===''){
$(this).attr('value', placeholder);
}
});
Example: http://jsfiddle.net/airandfingers/pdXRx/247/
Not pure CSS and not clean but does the trick.
i could certainly fake the placeholder effect using javascript, but i was hoping for something more simple
Unfortunately, @amosrivera, there appears to be no standard way: developer.mozilla.org/en/HTML/HTML5/…, other than a scripted workaround.
good solution, but I would add
if($(this).val() == 'This is...')to thefocushandler, otherwise if you add some text, then lose focus, then click on the textarea again, your text disappears.@DenisGolomazov Good addition; I just submitted an edit with the check in the focus handler. I also recommend adding a placeholder class and styling placeholders differently, as shown at this update to my modified jsfiddle example: jsfiddle.net/airandfingers/pdXRx/249
What if the user made input that matches exactly that of placeholder text, won't that will also gets erased ?