4

I am looking to line break on placeholder of textarea on reactjs

So far I have tried to use \n, <br>, nl2br, \\n and none of them worked

<Input type="textarea" name="txtarea"  placeholder="Line1  \n Line2" />

The current output im getting all in the same line as Line1 \n Line2

My goal is to have them out on a separate line as

Line1 
Line2
jo_va
  • 13,504
  • 3
  • 23
  • 47

2 Answers2

10

Newlines do not work in the placeholder attribute of <input> elements, but they work for the <textarea> element.

However, using <input type="textarea"> is not valid markup and will be replaced by the browser to an <input type="text">.

If you want multi-line input, use a <textarea> instead.

For the newline, use the &#13; and &#10; HTML entities in your placeholder, which are the line feed and the new line characters:

<input type="text" placeholder="line&#13;&#10;line2">
<textarea placeholder="line1&#13;&#10;line2"></textarea>
Kalnode
  • 9,386
  • 3
  • 34
  • 62
jo_va
  • 13,504
  • 3
  • 23
  • 47
1

You have to put that &#10; insted \n inside the placeholder

Dmitry S.
  • 1,544
  • 2
  • 13
  • 22