How to add HTML line break within an input text placeholder

Question

I want to add a line break within my input text placeholder.

<div class="form-group">
    <input type="text" class="form-control ph" id="" placeholder="Qualification Education Background *">
</div>

I tried with

<div class="form-group">
    <input type="text" class="form-control ph" id="" placeholder="Qualification\n</br> Education\n <br>Background *">
</div>

But it doesn't work. Would anyone help me to achieve this?

Use a `` or a `<div contenteditable="true">` `<input/>` does not render HTML. `<textarea>` doesn't render HTML but it can have more than one line. An element with `contenteditable` can render HTML but you'll need to use a little JS to mimic a placeholder probably.
[You can check on this link on stackoverflow](https://stackoverflow.com/questions/7312623/insert-line-break-inside-placeholder-attribute-of-a-textarea?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) — new_learner, Apr 27 '18 at 03:47

Yosef Tukachinsky · Answer 1 · 2020-06-22T21:17:34.490

9

input can't reach more than one line, so if you wanna make the input multyline use textarea. for make a line break in the placeholder of textarea use html entity-

&#10;

for example:

<div class="form-group">
     <textarea class="form-control ph" rows="5" 
     placeholder="Qualification &#10;Education &#10;Background *"></textarea>
</div>

edited Jun 22 '20 at 21:17

answered Apr 27 '18 at 04:04

Yosef Tukachinsky

5,570
1
13
29

1

sorry. not working – John Apr 27 '18 at 04:06
sorry, but you have to use textarea. as i say, input can have only one line. as in placeholer as in the text itself. the entity will work for the textarea – Yosef Tukachinsky Apr 27 '18 at 04:34

score 1 · Answer 2 · answered Apr 27 '18 at 04:00

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

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

This is a bad idea — would require handling two cases (when value is present; when it is not). — Dan Brown, Mar 17 '22 at 16:21

Glauco Raupp Russo · Answer 3 · 2018-04-27T04:09:16.937

0

You could try to position a label text instead a placeholder atribute and hide it on click or focus (with js) to clear input.

edited Apr 27 '18 at 04:09

answered Apr 27 '18 at 03:55

Glauco Raupp Russo

36
4

I need to use input text only – John Apr 27 '18 at 03:56

How to add HTML line break within an input text placeholder

3 Answers3