我尝试了一些方法,但没有一个奏效。有人知道绕过这个的妙招吗?

<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 -->

更新:它不工作在chrome。它只是textarea的宽度。

参见:http://jsfiddle.net/pdXRx/


当前回答

只添加&#10用于断行,不需要编写任何CSS或javascript。

textarea { 宽度:300 px; 身高:100 px; } <textarea占位符='这是一行这&#10应该是一个新行'></textarea> <textarea placeholder='这是一行 这应该是一条新线吗?" > < / >文本区域

其他回答

旧的回答:

不,你不能在占位符属性中这样做。你甚至不能用html编码像&#13;&#10;在占位符中。

新回答:

现代浏览器为您提供了几种方法。请看这个JSFiddle:

http://jsfiddle.net/pdXRx/5/

萨拉蒙·阿莱库姆

&#10;

适用于谷歌Chrome浏览器

<textarea placeholder="Enter Choice#1 &#10;Enter Choice#2 &#10;Enter Choice#3"></textarea>

我在Windows 10.0 (Build 10240)和谷歌Chrome版本上测试了这个 47.0.2526.80米 2015年12月17日星期四,1437,拉比奥瓦尔,AST 6 08:43:08

谢谢你!

你不能用纯HTML做到这一点,但这个jQuery插件可以让你:https://github.com/bradjasper/jQuery-Placeholder-Newlines

使用& # 10;在\n的地方,这将改变这一行。

使用自定义占位符检查此解决方案。

您将获得在所有浏览器(包括Firefox)中都可用的多行占位符 这是可以自定义占位符,因为你想要

演示小提琴。

$(document).on('input', '#textArea', function () { if ($('#textArea').val()) { $('#placeholderDiv').hide(); } else { $('#placeholderDiv').show(); } }); #textAreaWrap { position: relative; background-color: white; } #textArea { position: relative; z-index: 1; width: 350px; height: 100px; min-height: 100px; padding: 6px 12px; resize: vertical; background-color: transparent; /* When set background-color: transparent - Firefox displays unpleasant textarea border. Set border style to fix it.*/ border: 1px solid #a5a5a5; } #placeholderDiv { position: absolute; top: 0; padding: 6px 13px; color: #a5a5a5; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="textAreaWrap"> <textarea id="textArea"></textarea> <!-- Check here. If textarea has content - set for this div attribute style="display: none;" --> <div id="placeholderDiv">Multiline textarea<br> placeholder<br> <br> that works in Firefox</div> </div>