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?

Solution 1

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-




for example:

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

Solution 2

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

Comments

[zer00ne]

Use a <textarea> 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.

[new_learner]

You can check on this link on stackoverflow

[John]

@newlearner ,@zer00ne I need to do with input text only

[John]

I need to use input text only

[John]

sorry. not working

[Yosef Tukachinsky]

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

[Dan Brown]

This is a bad idea — would require handling two cases (when value is present; when it is not).