Can you have multiline HTML5 placeholder text in a textarea

Question

I have ghost text in textfields that disappear when you focus on them using HTML5 s placeholder attribute    lt input type  text  name  email  placeholder  Enter email   gt    I want to use that same mechanism to have multiline placeholder text in a textarea  maybe something like this    lt textarea name  story  placeholder  Enter story n next line n more  gt  lt  textarea gt    But those  ns show up in the text and don t cause newlines     Is there a way to have a multiline placeholder   UPDATE  The only way I got this to work was utilizing the jQuery Watermark plugin  which accepts HTML in the placeholder text       textarea class   watermark  Enter story lt br  gt    newline    fallback  false

User · Answer

There is actual a hack which makes it possible to add multiline placeholders in Webkit browsers, Chrome used to work but in more recent versions they removed it:

First add the first line of your placeholder to the html5 as usual

<textarea id="text1" placeholder="Line 1" rows="10"></textarea>

then add the rest of the line by css:

#text1::-webkit-input-placeholder::after {
    display:block;
    content:"Line 2\A Line 3";
}

If you want to keep your lines at one place you can try the following. The downside of this is that other browsers than chrome, safari, webkit-etc. don't even show the first line:

<textarea id="text2" placeholder="." rows="10"></textarea>?

then add the rest of the line by css:

#text2::-webkit-input-placeholder{
    color:transparent;
}

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

Demo Fiddle

It would be very great, if s.o. could get a similar demo working on Firefox.

User · Answer

On most  see details below  browsers  editing the placeholder in javascript allows multiline placeholder  As it has been said  it s not compliant with the specification and you shouldn t expect it to work in the future  edit  it does work   This example replaces all multiline textarea s placeholder   x000D   x000D  var textAreas   document getElementsByTagName  textarea     Array prototype forEach call textAreas  function elem        elem placeholder   elem placeholder replace    n g    n        x000D   lt textarea class  textAreaMultiline             placeholder  Hello   nThis is multiline example  n nHave Fun            rows  5  cols  35  gt  lt  textarea gt  x000D   x000D   x000D   JsFiddle snippet  Expected result   Based on comments it seems some browser accepts this hack and others don t  This is the results of tests I ran  with browsertshots and browserstack   Chrome   gt   35 0 1916 69 Firefox   gt   35 0  results varies on platform  IE   gt   10 KHTML based browsers  4 8 Safari  No  tested   Safari 8 0 6 Mac OS X 10 8  Opera  No  tested  lt   15 0 1147 72   Fused with theses statistics  this means that it works on about 88 7  of currently  Oct 2015  used browsers  Update  Today  it works on at least 94 4  of currently  July 2018  used browsers

User · Answer

React   If you are using React  you can do it as follows   placeholder   Address Line1 nAddress Line2 nCity State  Zip nCountry

User · Answer

Bootstrap   contenteditable   multiline placeholder  Demo  https   jsfiddle net 39mptojs 4   based on the  cyrbil and  daniel answer  Using Bootstrap  jQuery and https   github com gr2m bootstrap-expandable-input to enable placeholder in contenteditable   Using  placeholder replace  javascript and adding  white-space  pre  to css  multiline placeholder is shown   Html    lt div class  form-group  gt       lt label for  exampleContenteditable  gt Example contenteditable lt  label gt       lt div id  exampleContenteditable  contenteditable  true  placeholder  test nmultiple line nhere n nTested on Windows in Chrome 41  Firefox 36  IE 11  Safari 5 1 7     nCredits StackOveflow   placeholder replace   trick  white-space pre  class  form-control  gt       lt  div gt   lt  div gt    Javascript     document  ready function            div contenteditable  true     each function             var s   this  attr  placeholder            if  s                var s1 s replace    n g  String fromCharCode 10                  this  attr  placeholder  s1                           Css    form-control contenteditable  true         border 1px solid rgb 238  238  238       padding 3px 3px 3px 3px      white-space  pre  important      height auto  important      min-height 38px     form-control contenteditable  true   focus       border-color  66afe9

User · Answer

According to MDN       Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint    This means that if you just jump to a new line  it should be rendered correctly  I e    lt textarea placeholder  The car horn plays La Cucaracha  You can choose your own color as long as it s black  The GPS has the voice of Darth Vader    gt  lt  textarea gt     should render like this

User · Answer

Watermark solution in the original post works great  Thanks for it  In case anyone needs it  here is an angular directive for it    function         use strict      angular module  app        directive  placeholder   function            return           restrict   A           link      function  scope  element  attributes              if  element prop  nodeName        TEXTAREA                 var placeholderText   attributes placeholder trim                 if  placeholderText length                     support for both   n  symbol and an actual newline in the placeholder element               var placeholderLines   Array prototype concat                  apply     placeholderText split   n   map line   gt  line split    n                      map line   gt  line trim                    if  placeholderLines length  gt  1                    element watermark placeholderLines join   lt br gt  n

User · Answer

If you re using AngularJS  you can simply use braces to place whatever you d like in it  Here s a fiddle    lt textarea rows  6  cols  45  placeholder     Address Line1 nAddress Line2 nCity State  Zip nCountry     gt  lt  textarea gt

User · Answer

in php with function chr 13    echo   lt textarea class  quot form-control quot  rows  quot 5 quot  style  quot width 100   quot  name  quot responsable quot  placeholder  quot NOM pr  nom du responsable l  gal  chr 13   Adresse  chr 13   CP VILLE  chr 13   T  l  phone  chr 13   Adresse de messagerie quot  id  quot responsable quot  gt  lt  textarea gt     The ASCII character code 13 chr 13  is called a Carriage Return or CR

User · Answer

You can try using CSS  it works for me  The attribute placeholder     is required here    lt textarea id  myID  placeholder     gt  lt  textarea gt   lt style gt   myID  -webkit-input-placeholder  before       content   1st line    A2nd line    A3rd line         lt  style gt

User · Answer

If your textarea have a static width you can use combination of non-breaking space and automatic textarea wrapping  Just replace spaces to nbsp for every line and make sure that two neighbour lines can t fit into one  In practice line length  gt  cols 2   This isn t the best way  but could be the only cross-browser solution    x000D   x000D   lt textarea class  textAreaMultiligne   x000D            placeholder  Hello  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp  This amp nbsp is amp nbsp multiligne amp nbsp example Have amp nbsp Fun amp nbsp  amp nbsp  amp nbsp  amp nbsp   x000D            rows  5  cols  35  gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

The html5 spec expressly rejects new lines in the place holder field  Versions of Webkit  will  insert new lines when presented with line feeds in the placeholder  however this is incorrect behaviour and should not be relied upon   I guess paragraphs aren t brief enough for w3

User · Answer

I find that if you use a lot of spaces  the browser will wrap it properly  Don t worry about using an exact number of spaces  just throw a lot in there  and the browser should properly wrap to the first non space character on the next line    lt textarea name  address  placeholder  1313 Mockingbird Ln         Saginaw  MI 45100  gt  lt  textarea gt

User · Answer

This can apparently be done by just typing normally   x000D   x000D   lt textarea name    id    placeholder  Hello awesome world  I will break line now  Yup  Line break seems to work   gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

For  lt textarea gt 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

User · Answer

With Vue js   lt textarea name  quot story quot   placeholder  quot  Enter story n next line n more  quot  gt  lt  textarea gt

[html] Can you have multiline HTML5 placeholder text in a <textarea>?

Examples related to html

Examples related to textarea

Examples related to forms

Examples related to placeholder