Can You Have Multiline HTML5 Placeholder Text in a <Textarea>

Can you have multiline HTML5 placeholder text in a textarea ?

For <textarea>s the spec specifically outlines that carriage returns + line breaks in the placeholder attribute MUST be rendered as linebreaks by the browser.

User agents should present this hint to the user when the element's value is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused control). All U+000D CARRIAGE RETURN U+000A LINE FEED character pairs (CRLF) in the hint, as well as all other U+000D CARRIAGE RETURN (CR) and U+000A LINE FEED (LF) characters in the hint, must be treated as line breaks when rendering the hint.

Also reflected on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, when I try on Chrome 63.0.3239.132, it does indeed work as it says it should.

Is it possible to have a multiline placeholder in a textbox ASP.NET?

First of all set TextMode of textbox to MultiLine:

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Rows="3"></asp:TextBox>

You can do it in your Page_Load method by adding placeholder attribute and adding newline using Environment.NewLine or string literal "\r\n" like:

protected void Page_Load(object sender, EventArgs e)
{
    TextBox1.Attributes.Add("placeholder", "1,"+Environment.NewLine+"2," + Environment.NewLine + "3,");
    //or using \r\n:
    TextBox1.Attributes.Add("placeholder", "1,\r\n2,\r\n3,");
}

The output is:

Hope it will help you..!

Angular io: Adding multiple lines in placeholder

Try to add your placeholder value like this [placeholder] if you are getting data from your properties - this might understand the data has a string and reads your encoding, moves it to your next line i hope so - if not use html encoding for binding break - if that too doesn't work use attr binding for your placeholder

I think anyone of the above works - happy coding !!

[Can you have multiline HTML5 placeholder text in a <textarea>? check this for further update

Multi-Line Placeholder Text in Material UI

You need to use simple place holder shrink enabled :

here is the working codesandbox :Multiline Placeholder

Insert line break inside placeholder attribute of a textarea?

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.

Textarea multiline placeholder but every line has different style

It's fairly simple to achieve that by using pseudo-css-classes for the placeholder:

textarea::-webkit-input-placeholder {    /* design first line here */          font-size: 2em;}
textarea::-webkit-input-placeholder::after {    /* design second line here */    display:block;    content:"Please note that we do not work...";    font-style:italic;    font-size: .6em;    margin-top: 20px;}

<textarea placeholder="Message" rows="10" cols="50"></textarea>