你能在 < textarea > 中使用多行 HTML5占位符文本吗？

小开

最佳答案

对于 <textarea>s，说明书特别指出占位符属性中的回车 + 换行符必须由浏览器呈现为换行符。

当元素的值是空字符串且控件没有聚焦时，用户代理应该向用户显示这个提示(例如，通过在一个空的未聚焦的控件中显示它)。提示中的所有 U + 000 D CARRIAGE RETURN U + 000 A LINE FEED 字符对(CRLF) ，以及提示中的所有其他 U + 000 D CARRIAGE RETURN (CR)和 U + 000 A LINE FEED (LF)字符，在呈现提示时必须作为换行处理。

也反映在 MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder上

FWIW，当我试用 Chrome 63.0.3239.132的时候，它确实像它说的那样工作。

小开

Html5规格明确拒绝占位符字段中的新行。Webkit 我会版本在占位符中显示行提要时会插入新行，但这是不正确的行为，不应该依赖它。

我想段落对 w3来说不够简洁;)

小开

我发现如果你使用大量的空格，浏览器会正确地包装它。不要担心使用精确的空格数量，只要在这里放入很多空格，浏览器应该正确地换行到下一行的第一个非空格字符。

<textarea name="address" placeholder="1313 Mockingbird Ln         Saginaw, MI 45100"></textarea>

小开

实际上有一种黑客技术使得在 Webkit 浏览器中添加多行占位符成为可能，Chrome 曾经可以工作，但是在最近的版本中他们删除了它:

首先像往常一样将占位符的第一行添加到 html5

<textarea id="text1" placeholder="Line 1" rows="10"></textarea>

然后通过 css 添加该行的其余部分:

#text1::-webkit-input-placeholder::after {
display:block;
content:"Line 2\A Line 3";
}

如果您希望将线保持在一个位置，可以尝试以下操作。这样做的缺点是除了 chrome、 safari、 webkit 等浏览器以外的其他浏览器。甚至连第一行都没有:

<textarea id="text2" placeholder="." rows="10"></textarea>

然后通过 css 添加该行的其余部分:

#text2::-webkit-input-placeholder{
color:transparent;
}


#text2::-webkit-input-placeholder::before {
color:#666;
content:"Line 1\A Line 2\A Line 3\A";
}

演示小提琴

如果能在 Firefox 上得到类似的演示，那就太好了。

小开

您可以尝试使用 CSS，它为我工作。属性 placeholder=" "是必需的在这里。

<textarea id="myID" placeholder=" "></textarea>
<style>
#myID::-webkit-input-placeholder::before {
content: "1st line...\A2nd line...\A3rd line...";
}
</style>

小开

在 大部分浏览器上，编辑 javascript 中的占位符允许多行占位符。如前所述，它与规格不兼容，您不应该期望它在未来能够工作(编辑: 它确实能够工作)。

此示例替换所有多行 textarea 的占位符。

var textAreas = document.getElementsByTagName('textarea');


Array.prototype.forEach.call(textAreas, function(elem) {
elem.placeholder = elem.placeholder.replace(/\\n/g, '\n');
});

<textarea class="textAreaMultiline"
placeholder="Hello, \nThis is multiline example \n\nHave Fun"
rows="5" cols="35"></textarea>

_{JsFiddle 片段。}

预期结果

Expected result

根据评论，似乎有些浏览器接受这种黑客行为，而其他浏览器则不然。
这是我运行的测试(使用浏览照片和浏览器)的结果

Chrome: > = 35.0.1916.69
Firefox: > = 35.0(不同平台的结果不同)
IE: > = 10
基于 KHTML 的浏览器: 4.8
Safari: No (test = Safari 8.0.6 Mac OS X 10.8)
Opera: No (测试 < = 15.0.1147.72)

融合了这些统计数字，这意味着它工作在当前 (二零一五年十月)使用的浏览器的大约 88.7% 上。

更新 : 目前，它至少可以在 (二零一八年七月)使用的浏览器的 94.4% 上工作。

小开

Bootstrap + contenteditable + multiline 占位符

演示: https://jsfiddle.net/39mptojs/4/

基于@cyrbil 和@daniel 的答案

使用 Bootstrap、 jQuery 和 https://github.com/gr2m/bootstrap-expandable-input在 contenteditable 中启用占位符。

使用“占位符替换”javascript 并将“ white-space: pre”添加到 css 中，显示了多行占位符。

网址:

<div class="form-group">
<label for="exampleContenteditable">Example contenteditable</label>
<div id="exampleContenteditable" contenteditable="true" placeholder="test\nmultiple line\nhere\n\nTested on Windows in Chrome 41, Firefox 36, IE 11, Safari 5.1.7 ...\nCredits StackOveflow: .placeholder.replace() trick, white-space:pre" class="form-control">
</div>
</div>

Javascript:

$(document).ready(function() {
$('div[contenteditable="true"]').each(function() {
var s=$(this).attr('placeholder');
if (s) {
var s1=s.replace(/\\n/g, String.fromCharCode(10));
$(this).attr('placeholder',s1);
}
});
});

传真:

.form-control[contenteditable="true"] {
border:1px solid rgb(238, 238, 238);
padding:3px 3px 3px 3px;
white-space: pre !important;
height:auto !important;
min-height:38px;
}
.form-control[contenteditable="true"]:focus {
border-color:#66afe9;
}

小开

如果你的 textarea有一个静态宽度，你可以使用不换行空格和自动纹理包装的组合。只需将每条线的空格替换为 nbsp，并确保两条相邻的线不能合并到一条线上。在实践中 line length > cols/2。

这不是最好的方法，但可能是唯一的跨浏览器解决方案。

<textarea class="textAreaMultiligne"
placeholder="Hello,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This&nbsp;is&nbsp;multiligne&nbsp;example Have&nbsp;Fun&nbsp;&nbsp;&nbsp;&nbsp;"
rows="5" cols="35"></textarea>

小开

如果您正在使用 AngularJS，您可以简单地使用大括号来放置任何您想要放在其中的内容: 这是小提琴。

<textarea rows="6" cols="45" placeholder="\{\{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>

小开

水印解决方案在原来的帖子工作很好。感谢它。如果有人需要它，这里有一个角度指示。

(function () {
'use strict';


angular.module('app')
.directive('placeholder', function () {
return {
restrict: 'A',
link:     function (scope, element, attributes) {
if (element.prop('nodeName') === 'TEXTAREA') {
var placeholderText = attributes.placeholder.trim();


if (placeholderText.length) {
// support for both '\n' symbol and an actual newline in the placeholder element
var placeholderLines = Array.prototype.concat
.apply([], placeholderText.split('\n').map(line => line.split('\\n')))
.map(line => line.trim());


if (placeholderLines.length > 1) {
element.watermark(placeholderLines.join('<br>\n'));
}
}
}
}
};
});
}());

小开

函数 chr (13) :

echo '<textarea class="form-control" rows="5" style="width:100%;" name="responsable" placeholder="NOM prénom du responsable légal'.chr(13).'Adresse'.chr(13).'CP VILLE'.chr(13).'Téléphone'.chr(13).'Adresse de messagerie" id="responsable"></textarea>';

ASCII 字符代码13chr (13)被称为回车或 CR

小开

反应:

如果你正在使用 React，你可以这样做:

placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}

小开

根据 MDN ,

在呈现提示时，占位符文本中的回车或换行符必须被视为换行符。

这意味着如果您只是跳转到一个新行，那么它应该被正确地呈现。

<textarea placeholder="The car horn plays La Cucaracha.
You can choose your own color as long as it's black.
The GPS has the voice of Darth Vader.
"></textarea>

应该是这样的:

小开

Vue.js:

<textarea name="story" :placeholder="'Enter story\n next line\n more'"></textarea>

小开

这显然可以通过正常输入来完成,

<textarea name="" id="" placeholder="Hello awesome world. I will break line now


Yup! Line break seems to work."></textarea>

小开

如果您正在使用一个像 Aurelia 这样的框架，它允许将视图模型属性绑定到 HTML5元素属性，那么您可以执行以下操作:

<textarea placeholder.bind="placeholder"></textarea>

export class MyClass {
placeholder = 'This is a \r\n multiline placeholder.'
}

在这种情况下，回车和换行符在绑定到元素时受到尊重。