S

25

277

I have tried a few approaches but none worked. Does anyone know a the nifty trick to get around this?

<textarea placeholder='This is a line \n this should be a new line'></textarea>

<textarea placeholder='This is a line     
should this be a new line?'></textarea> <!-- this works in chrome apparently -->

UPDATE: It doesn't work in chrome. It was just the textarea width.

See: http://jsfiddle.net/pdXRx/

Selfreproach answered 5/9, 2011 at 20:50 Comment(8)

If using PHP, you can put <?="\n"?> as a new line – Festoon 17/5, 2014 at 12:48

Just add 
 in the placeholder attribute, like <textarea placeholder="This is a line
This is another one"></textarea>. The answer is down below. – Scyphozoan 8/1, 2015 at 17:11

@Scyphozoan this works in Chrome, IE but not in Firefox and Safari. – Mesoblast 16/7, 2015 at 9:57

@Mesoblast I have tested it a minute ago in Firefox 60.0.2 and now it works. Maybe it would work in most browsers now. – Zealand 16/7, 2018 at 9:49

It's 2020 and still no solution for Safari? – Commutative 1/1, 2020 at 9:38

Does this answer your question? Can you have multiline HTML5 placeholder text in a <textarea>? – Coltin 6/7, 2020 at 7:14

If using PHP, then you can also use <?='This is a line'.PHP_EOL.'This should be a new line';?>. – Hew 15/9, 2021 at 9:18

Does this answer your question? How can I use a carriage return in a HTML tooltip? – Anglesite 26/1, 2023 at 22:55

S

59

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.

Subject answered 5/9, 2011 at 22:47 Comment(10)

i could certainly fake the placeholder effect using javascript, but i was hoping for something more simple – Selfreproach 5/9, 2011 at 23:9

Unfortunately, @amosrivera, there appears to be no standard way: developer.mozilla.org/en/HTML/HTML5/…, other than a scripted workaround. – Subject 5/9, 2011 at 23:12

good solution, but I would add if($(this).val() == 'This is...') to the focus handler, otherwise if you add some text, then lose focus, then click on the textarea again, your text disappears. – Angiology 6/8, 2013 at 7:14

@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 – Litter 26/9, 2013 at 19:23

What if the user made input that matches exactly that of placeholder text, won't that will also gets erased ? – Fiendish 28/8, 2015 at 12:15

Any solution for iPad with iOS9? – Aholla 18/3, 2016 at 11:43

For any interested, the only solution I've found with iOS9 is this: codepen.io/kcmr/pen/XJovvQ – Aholla 21/3, 2016 at 8:29

I know it's a stupid question... But I've spend quite a little time trying to figure out is there any difference between your fiddle and mine. They seem to be the same to me, but while yours works like a charm, mine is not working ;( – Villainage 7/8, 2016 at 16:6

I've found that the issue is due to the change of usage of $.fn.attr('value') from 1.6 to 1.9 (1.9 is the jQuery version I used in my fiddle and that's the reason why the fiddle is not working. I'll figure out from which version the usage exactly changed and update the comment later). Anyway, for jQuery 1.9+, $.fn.val() should be used in this case. Thanks for the great solution. – Villainage 7/8, 2016 at 16:48

@JasonGennaro the link you provided does not contain the placeholder anchor anymore. – Coltin 6/7, 2020 at 7:13

S

461

You can insert a new line html entity 
 inside the placeholder attribute:

<textarea name="foo" placeholder="hello you&#10;Second line&#10;Third line"></textarea>

Works on: Chrome 62, IE10, Firefox 60

Doesn't work on: Safari 11

https://jsfiddle.net/lu1s/bxkjLpag/2/

Scyphozoan answered 29/9, 2014 at 18:18 Comment(12)

this does exactly what the original question asked for. why isn't it voted up higher? does it not work in every browser? – Inter 3/1, 2015 at 2:40

@Inter - Indeed it doesn't. I just tried it in FF and it prints out the 
 literally, without producing a whitespace character. See developer.mozilla.org/en/HTML/HTML5/… – Bring 11/1, 2015 at 12:46

@MerlynMorgan-Graham @Inter you're right. If it's not cross-browser maybe it's not really good to implement this. But for sure you can add a little javascript to replace the 
 of the placeholder and convert them in \n and pass them to the value attribute of the textarea element. Finally replace the placeholder for an empty string. – Scyphozoan 12/1, 2015 at 23:11

Works on IE10 and Chrome 62. – Orme 14/11, 2017 at 9:50

Works very well in newer versions of Firefox – Roux 9/4, 2018 at 6:28

Works in Firefox 60. – Nomology 20/4, 2018 at 0:20

I just tried it and it didn't do anything in Chrome- HOWEVER I must point out that I'm trying to add the placeholder via React, which might strip this kind of thing out. – Parietal 21/5, 2020 at 15:54


 is converted to a space in Svelte. – Kharif 9/1, 2023 at 20:58

@Kharif maybe you can try with this other html special entity for line break:  – Scyphozoan 12/1, 2023 at 22:9

Can confirm that @Scyphozoan suggestion works for Svelte as of writing – Assembled 22/3, 2023 at 12:53

This works for me in React as well. – Receptionist 30/3, 2023 at 1:49

yes, long live :) – Scyphozoan 25/4, 2023 at 1:1

U

72

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:

<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
1 Long St
London
Postcode
UK"></textarea>

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:

<form>
  <input type='text' placeholder='First Name' />
  <input type='text' placeholder='Last Name' />
  <div class='textarea-placeholder'>
    <textarea></textarea>
    <div>
      First Line
      <br /> Second Line
      <br /> Third Line
    </div>
  </div>
</form>

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;
  &.data-edits {
    background-color: #fff;
  }
}

.textarea-placeholder {
  position: relative;
  > 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:

$("textarea").on('change keyup paste', function() {
  var length = $(this).val().length;
  if (length > 0) {
    $(this).addClass('data-edits');
  } else {
    $(this).removeClass('data-edits');
  }
});

Unto answered 5/11, 2012 at 11:18 Comment(8)

A very cute hack. This definitely works in Chrome. Can we confirm it functions the same in all other major browsers? – Sundberg 1/5, 2013 at 14:50

I would love someone to test it in IE. I can confirm it works on the most recent versions of Safari and Chrome but definitely not Firefox. I now use text instead of placeholder and have a css class to make the text look like a placeholder. Then a small jQuery function to clear the text when it has focus - or put it back if empty! – Unto 1/5, 2013 at 15:10

Works fine in Chrome and IE 11. But not works at Firefox and Android default browser. – Stepdame 7/7, 2015 at 16:2

Not working on Safari, Firefox, Opera. Works only in Chrome :( – Statism 15/1, 2016 at 14:2

While this seem to work great - it's still considered "invalid" html. Just a heads-up. – Yorick 12/7, 2016 at 7:42

This should be the accepted answer, because the current one may submit the "placeholder" value with the form. Note: the solution under "A Better Solution" works correctly cross browser. The comments saying different must refer to "A Nice Little Hack". – Sigmund 15/2, 2017 at 17:30

I used the second hack, but instead of evaluating the length of the val, used a space (placeHolder=' ') as a placeholder and the :not(:placeholder-shown) atrribute for the other class. – Incontrovertible 28/2, 2018 at 4:30

The ugly newline approach detailed at the top of this answer was the one that worked for me when a Vue bind. Vue for some reason ignored the 
 route (it put those characters in literally) but does honour the literal line breaks. – Gobioid 4/4, 2023 at 13:31

E

65

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.

Ere answered 5/9, 2011 at 20:54 Comment(5)

@Selfreproach Hmm. Well, vendors are allowed to interpret the spec in the fashion they see fit. – Ere 6/9, 2011 at 1:39

im a tool, it looked like a line breaking but in fact it was just the placeholder wrapping around the textarea width.. – Selfreproach 6/9, 2011 at 15:5

The answer is correct. but I consider the rule total nonsense. What's the exact argument for "must not contain" LR or CR? – Romilly 29/8, 2013 at 16:42

@Jens-AndréKoch I assume the argument is that a placeholder should be simple; if the value is complex enough to need line-breaks, it should exist as a sibling element, similar to what you see if you activate the "show help" link by this comment editor. A placeholder is not visible once an input contains content, after all... – Ere 30/8, 2013 at 0:7

I would like to remove that old answer of mine but it keeps giving me free points every once in a while. Yet your answer is the proper one. – Scyphozoan 30/11, 2018 at 16:14

S

59

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);
    }    
});