如何在输入框的占位符中添加HTML换行符

Question

我想在我的输入框占位符中添加一个换行符。

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

我尝试使用

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

但是它不起作用。有没有人能帮我实现这个？

- John

---

使用<textarea>或<div contenteditable='true'>，而不是<input>。<input>不能呈现HTML。<textarea>不能呈现HTML，但可以有多行。带有contenteditable属性的元素可以呈现HTML，但您需要使用一些JS来模拟占位符。 - zer00ne

你可以在以下链接中查看stackoverflow的内容：https://dev59.com/8Ww05IYBdhLWcg3wUAM0?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa - new_learner

@newlearner，@zer00ne 我只需要处理输入文本。 - John

Answer 1

输入框无法换行，如果需要多行输入，请使用文本域(textarea)。若要在文本域的占位符中换行，请使用HTML实体-




例如：

举个例子：

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

- Yosef Tukachinsky

---

抱歉，无法工作。 - John

抱歉，您必须使用文本区域。正如我所说，输入框只能有一行。就像占位符和文本本身一样。该实体将适用于文本区域。 - Yosef Tukachinsky

Answer 2

你可以将文本作为value添加，该值应保留换行符\n。

$('textarea').attr('value', 'This is a line \nthis should be a new line');

然后您可以在焦点上移除它，并在失去焦点时重新应用它（如果为空）。

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

- ABHINEET SRIVASTAVA

---

这是一个不好的想法 - 需要处理两种情况（当值存在时; 当它不存在时）。 - Dan Brown

Answer 3

你可以尝试将标签文本定位到占位符属性上，然后在单击或聚焦时（使用js）隐藏它以清除输入。

- Glauco Raupp Russo

---

我需要仅使用输入文本。 - John