我尝试了一些方法，但没有一个奏效。有人知道绕过这个的妙招吗?
<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/
当前回答
这个问题可以通过使用占位符显示的选择器和超级强加的背景来解决，如果你的实现允许:
textarea:not(:placeholder-shown) {
background: #fff;
}
div {
top: 0;
left: 14px;
color: rgba(0,0,0,0.4);
z-index: -1;
position: absolute;
line-height: 1.2;
white-space: pre-wrap;
}
https://codepen.io/franciscoaquino/pen/YzyBPYK
选择器支持:
https://caniuse.com/#feat=css-placeholder-shown
其他回答
使用自定义占位符检查此解决方案。
您将获得在所有浏览器(包括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>
你可以插入一个新的行html实体 在占位符属性内部:
< textarea name = " foo " placeholder =“你好you& 10;第二个line& #第三线" > < / textarea > 10;
适用于: Chrome 62, IE10, Firefox 60
不起作用: Safari 11
https://jsfiddle.net/lu1s/bxkjLpag/2/
如何使用CSS解决方案:http://cssdeck.com/labs/07fwgrso
::-webkit-input-placeholder::before {
content: "FIRST\000ASECOND\000ATHIRD";
}
::-moz-placeholder::before {
content: "FIRST\000ASECOND\000ATHIRD";
}
:-ms-input-placeholder::before {
content: "FIRST\000ASECOND\000ATHIRD";
}
不要认为你可以这样做:http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute
相关内容(重点我):
占位符属性表示一个简短的提示(一个单词或简短的提示) 短语)，用于帮助用户在控件出现故障时输入数据 没有价值。方法的示例值或简要描述可以是提示 预期的格式。如果指定了属性，则该属性的值必须为 不包含U+000A换行(LF)或U+000D回车(CR) 字符。
Textarea尊重占位符的空白属性。https://www.w3schools.com/cssref/pr_text_white-space.asp
将它设置为预行，为我解决了这个问题。
textarea { 空白:pre-line; ｝ <textarea placeholder='这是一行 这应该是一个新的行'></textarea>
