Insert line break inside placeholder attribute of a textarea

Question

I have tried a few approaches but none worked  Does anyone know a the nifty trick to get around this    lt textarea placeholder  This is a line  n this should be a new line  gt  lt  textarea gt    lt textarea placeholder  This is a line      should this be a new line   gt  lt  textarea gt   lt  -- this works in chrome apparently -- gt    UPDATE  It doesn t work in chrome  It was just the textarea width    See  http   jsfiddle net pdXRx

User · Answer

You can insert a new line html entity  amp  10  inside the placeholder attribute   x000D   x000D   lt textarea name  foo  placeholder  hello you amp  10 Second line amp  10 Third line  gt  lt  textarea gt  x000D   x000D   x000D   Works on  Chrome 62  IE10  Firefox 60 Doesn t work on  Safari 11 https   jsfiddle net lu1s bxkjLpag 2

User · Answer

A slightly improved version of the Jason Gennaro s answer  see code comments    var placeholder    This is a line  nthis should be a new line      textarea   attr  value   placeholder      textarea   focus function        if   this  val      placeholder              reset the value only if it equals the initial one               this  attr  value                     textarea   blur function        if   this  val                     this  attr  value   placeholder                    remove the focus  if it is on by default    textarea   blur

User · Answer

Check out this solution with custom placeholder    You get multiline placeholder that works in all browsers  including Firefox  It is posible to customise placeholder as you want   Demo on fiddle    x000D   x000D    document  on  input     textArea   function      x000D    x000D          if      textArea   val      x000D                  placeholderDiv   hide    x000D            else   x000D                  placeholderDiv   show    x000D               x000D      x000D   textAreaWrap   x000D      position  relative  x000D      background-color  white  x000D    x000D   x000D   textArea   x000D      position  relative  x000D      z-index  1  x000D      width  350px  x000D      height  100px  x000D      min-height  100px  x000D      padding  6px 12px  x000D      resize  vertical  x000D      background-color  transparent  x000D         When set background-color  transparent - Firefox  displays x000D      unpleasant textarea border  Set border style to fix it    x000D      border  1px solid  a5a5a5  x000D    x000D   x000D   placeholderDiv   x000D      position  absolute  x000D      top  0  x000D      padding  6px 13px  x000D      color   a5a5a5  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  textAreaWrap  gt  x000D       x000D   lt textarea id  textArea  gt  lt  textarea gt  x000D   x000D   lt  -- Check here  If textarea has content - x000D       set for this div attribute style  display  none   -- gt  x000D   lt div id  placeholderDiv  gt Multiline textarea lt br gt  x000D                           placeholder lt br gt  x000D                            lt br gt  x000D                           that works in Firefox lt  div gt  x000D       x000D   lt  div gt  x000D   x000D   x000D

User · Answer

HTML   lt textarea data-placeholder  1111 n2222  gt  lt  textarea gt    JS     textarea data-placeholder    each function        var  this     this           placeholder    this data  placeholder            placeholderSplit   placeholder split    n        placeholder   placeholderSplit join   n         this focus function            var  this     this           if  this val       placeholder                this val                      this removeClass  placeholder                     blur function            var  this     this           if  this val                         this val placeholder                   this addClass  placeholder                     trigger  blur

User · Answer

I liked the work of Jason Gennaro and Denis Golomazov  but I wanted something that would be more globally useful  I have modified the concept so that it can be added to any page without repercussion   http   jsfiddle net pdXRx 297    lt h1 gt Demo  5 different textarea placeholder behaviors from a single JS lt  h1 gt    lt h2 gt Modified behaviors lt  h2 gt    lt  -- To get simulated placeholder with New Lines behavior       add the placeholdernl attribute -- gt    lt textarea placeholdernl gt      click me to demo  Johnny S  Fiddle 248 Fake St  Atlanta  GA 30134 lt  textarea gt    lt textarea placeholder  Address  placeholdernl gt      click me to demo  Johnny S  Fiddle 248 Fake St  Atlanta  GA 30134 lt  textarea gt    lt h2 gt Standard behaviors lt  h2 gt    lt textarea placeholder  Address  gt      delete me to demo  Johnny S  Fiddle 248 Fake St  Atlanta  GA 30134 lt  textarea gt    lt textarea gt      delete me to demo  Johnny S  Fiddle 248 Fake St  Atlanta  GA 30134 lt  textarea gt    lt textarea placeholder  Address  gt  lt  textarea gt    The javascript is very simple   lt script gt   function     var handleFocus   function        var  this     this       if  this val        this attr  placeholdernl              this attr  value                 this css  color                  var handleBlur   function        var  this     this       if  this val                    this attr  value    this attr  placeholdernl             this css  color    gray                     textarea placeholdernl    each function        var  this     this           value    this attr  value            placeholder    this attr  placeholder         this attr  placeholdernl   value   value   placeholder        this attr  value             this focus handleFocus  blur handleBlur  trigger  blur           jQuery    lt  script gt

User · Answer

Add only  amp  10 for breaking line  no need to write any CSS or javascript     x000D   x000D  textarea  x000D      width 300px  x000D      height 100px  x000D   x000D    x000D   lt textarea placeholder  This is a line this  amp  10should be a new line  gt  lt  textarea gt  x000D   x000D   lt textarea placeholder   This is a line  x000D   x000D  should this be a new line   gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Use  amp  10  in place of  n this will change the line

User · Answer

Textarea respects the white-space attribute for the placeholder  https   www w3schools com cssref pr text white-space asp  Setting it to pre-line solved the problem for me    x000D   x000D  textarea   x000D    white-space  pre-line  x000D    x000D   lt textarea placeholder  This is a line      x000D  should this be a new line  gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

I modified  Richard Bronosky s fiddle like this   It s better approach to use data-  attribute rather than a custom attribute  I replaced  lt textarea placeholdernl gt  to  lt textarea data-placeholder gt  and some other styles as well   edited Here is the Richard s original answer which contains full code snippet

User · Answer

Don t think you re allowed to do that  http   www w3 org TR html5 forms html the-placeholder-attribute  The relevant content  emphasis mine       The placeholder attribute represents a short hint  a word or short   phrase  intended to aid the user with data entry when the control has   no value  A hint could be a sample value or a brief description of the   expected format  The attribute  if specified  must have a value that   contains no U 000A LINE FEED  LF  or U 000D CARRIAGE RETURN  CR    characters

User · Answer

Old answer  Nope  you can t do that in the placeholder attribute  You can t even html encode newlines like  amp  13  amp  10  in a placeholder  New answer  Modern browsers give you several ways to do this  See this JSFiddle  http   jsfiddle net pdXRx 5

User · Answer

You can t do it with pure HTML  but this jQuery plugin will let you  https   github com bradjasper jQuery-Placeholder-Newlines

User · Answer

very simple     var position   your break position      var breakLine     amp  13  amp  10     in html      var output    value slice 0  position   breakLine  value slice position   join          return output    value represent the original string

User · Answer

This issue can be tackled by using the placeholder-shown selector and super imposed backgrounds  if your implementation allows   textarea not  placeholder-shown      background   fff     div     top  0    left  14px    color  rgba 0 0 0 0 4     z-index  -1    position  absolute    line-height  1 2    white-space  pre-wrap      https   codepen io franciscoaquino pen YzyBPYK  Selector support   https   caniuse com  feat css-placeholder-shown

User · Answer

Salaamun Alekum  amp  10   Works For Google Chrome   lt textarea placeholder  quot Enter Choice 1  amp  10 Enter Choice 2  amp  10 Enter Choice 3 quot  gt  lt  textarea gt    I Tested This On Windows 10 0  Build 10240  And Google Chrome Version 47 0 2526 80 m 08 43 08 AST 6 Rabi Al-Awwal  1437 Thursday  17 December 2015  Thank You

User · Answer

How about a CSS solution  http   cssdeck com labs 07fwgrso    -webkit-input-placeholder  before     content   FIRST 000ASECOND 000ATHIRD        -moz-placeholder  before     content   FIRST 000ASECOND 000ATHIRD       -ms-input-placeholder  before     content   FIRST 000ASECOND 000ATHIRD

User · Answer

UPDATE  Jan 2016   The nice little hack might not work on all browsers anymore so I have a new solution with a tiny bit of javascript below   A Nice Little Hack It doesn t feel nice  but you can just put the new lines in the html  Like this   x000D   x000D   lt textarea rows  6  id  myAddress  type  text  placeholder  My Awesome House  1 Long St London Postcode UK  gt  lt  textarea gt  x000D   x000D   x000D   Notice each line is on a new line  not being wrapped  and each  tab  indent is 4 spaces  Granted it is not a very nice method  but it seems to work  http   jsfiddle net 01taylop HDfju   It is likely that the indent level of each line will vary depending on the width of your text area  It is important to have resize  none  in the css so that the size of the textarea is fixed  See jsfiddle    Alternatively When you want a new line  hit return twice  So there is a empty line between your  new lines   This  empty line  created needs to have enough tabs spaces that would equate to the width of your textarea  It doesn t seem to matter if you have far too many  you just need enough  This is so dirty though and probably not browser compliant  I wish there was an easier way   A Better Solution Check out the JSFiddle   This solution positions a div behind the textarea  Some javascript is used to change the background colour of the textarea  hiding or revealing the placeholder appropriately  The inputs and placeholders must have the same font sizes  hence the two mixins  The box-sizing and display  block properties on the textarea are important or the div behind it will not be the same size  Setting resize  vertical and a min-height on the textarea are also important - notice how the placeholder text will wrap and expanding the textarea will keep the white background  However  commenting out the resize property will cause issues when expanding the textarea horizontally  Just make sure the min-height on the textarea is enough to cover your entire placeholder at its smallest width      HTML   lt form gt     lt input type  text  placeholder  First Name    gt     lt input type  text  placeholder  Last Name    gt     lt div class  textarea-placeholder  gt       lt textarea gt  lt  textarea gt       lt div gt        First Line        lt br   gt  Second Line        lt br   gt  Third Line      lt  div gt     lt  div gt   lt  form gt   SCSS   input-padding  4px    mixin input-font       font-family   HelveticaNeue-Light    Helvetica Neue Light    Helvetica Neue   Helvetica  Arial   Lucida Grande   sans-serif    font-size  12px    font-weight  300    line-height  16px      mixin placeholder-style       color   999     include input-font             -webkit-box-sizing  border-box    -moz-box-sizing  border-box    box-sizing  border-box     form     width  250px     input textarea     display  block    width  100     padding   input-padding    border  1px solid  ccc     input     margin-bottom  10px    background-color   fff      include input-font       textarea     min-height  80px    resize  vertical    background-color  transparent     amp  data-edits       background-color   fff          textarea-placeholder     position  relative     gt  div       position  absolute      z-index  -1      top  0      left  0      width  100       height  100       padding   input-padding      background-color   fff       include placeholder-style             -webkit-input-placeholder      include placeholder-style       -moz-placeholder      include placeholder-style        -moz-placeholder      include placeholder-style       -ms-input-placeholder      include placeholder-style       Javascript     quot textarea quot   on  change keyup paste   function       var length     this  val   length    if  length  gt  0          this  addClass  data-edits        else         this  removeClass  data-edits

User · Answer

Try this    lt textarea placeholder  Line1 amp  x0a  amp  x09  amp  x09  amp  x09 Line2  cols  10  rows  5  style  resize none  gt   lt  textarea gt    http   jsfiddle net vr79B

User · Answer

I don t like hiding the placeholder when you focus the textarea  So I made a constructor function Placeholder that looks exactly like the built-in placeholder and works also in other browsers than Google Chrome  It s very convenient because you can use the Placeholder function as often as you want and it doesn t even need jQuery   EDIT   It now also handles special cases  like inserting the placeholder  correctly    x000D   x000D  var textarea   document getElementById  textarea    x000D  new Placeholder textarea   Line 1 nLine 2 nLine 3    x000D   x000D  function Placeholder el  placeholder    x000D      if  el value          el value    placeholder    x000D          el style color    gray   x000D          el value   placeholder  x000D          el  plc   true  x000D          el className      unselectable   x000D        x000D      function keyPress e    x000D          window setTimeout function     x000D              var replaced   reverseStr el value  replace reverseStr placeholder        x000D               x000D              if  el value          x000D                  el value   placeholder  x000D                  el style color    gray   x000D                  cursorToStart el   x000D                  el  plc   true  x000D                  el className      unselectable   x000D                else if  el  plc  amp  amp  el value endsWith placeholder   amp  amp  replaced           x000D                  el value   reverseStr replaced   x000D                  el style color    black   x000D                  el  plc   false  x000D                  el readOnly   false  x000D                  el className   el className replace  unselectable        x000D                else if  el  plc  amp  amp  el readOnly    x000D                  var ch   String fromCharCode e charCode   x000D                  if  e keyCode    13  ch     n          ENTER x000D                  else if  e charCode    0  return       non-character keys x000D                   x000D                  el value   ch  x000D                  el style color    black   x000D                  el  plc   false  x000D                  el readOnly   false  x000D                  el className   el className replace  unselectable        x000D                x000D             10   x000D        x000D      el addEventListener  keypress   keyPress  false   x000D      el addEventListener  paste   keyPress  false   x000D      el addEventListener  cut   keyPress  false   x000D      el addEventListener  mousedown   function     x000D          if  el  plc  el readOnly   true  x000D         false   x000D      el addEventListener  mouseup   function     x000D          el readOnly   false  x000D          if  el  plc  cursorToStart el   x000D         false   x000D     x000D      function cursorToStart input    x000D          if  input createTextRange    x000D              var part   input createTextRange    x000D              part move  character   0   x000D              part select    x000D            else if  input setSelectionRange   x000D              input setSelectionRange 0  0   x000D            input focus    x000D        x000D      function reverseStr str    x000D          if   str  return     x000D          return str split     reverse   join      x000D        x000D    x000D  textarea   x000D      border  1px solid gray  x000D      padding  3px 6px  x000D      font-family  Arial  x000D      font-size  13px  x000D      transition   2s  x000D    x000D  textarea hover  textarea focus   x000D      border-color   2277cc  x000D    x000D  textarea focus   x000D      box-shadow  inset 0 0 5px  85B7E9  x000D    x000D    unselectable   x000D      -webkit-user-select  none  x000D      -webkit-touch-callout  none  x000D      -khtml-user-select  none  x000D      -moz-user-select  none  x000D      -ms-user-select  none  x000D      -o-user-select  none  x000D    x000D   lt textarea id  textarea  gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

Based on a combination of three different tricks I saw this seems to work in all browsers I ve tested it in  HTML   lt textarea placeholder  quot Line One amp  10 Line Two amp  10  amp  10 Line Four quot  gt  lt  textarea gt   JS At bottom of HTML file   lt script gt           var textAreas   document getElementsByTagName  textarea         Array prototype forEach call textAreas  function elem            elem placeholder   elem placeholder replace   u000A g                                                                                                                                                                                                            n u2063              lt  script gt   Note  the extra spaces will cause a clean wrap around but there has to be enough spaces that it will fill the width of the textarea  I placed enough that it s sufficient for my projects but you could be robust and generate them by observing the textarea width and calculating the proper cardinality

[html] Insert line break inside placeholder attribute of a textarea?

Examples related to html