Question

我在文本字段中有鬼文本，当你使用HTML5的占位符属性关注它们时会消失：

<input type="text" name="email" placeholder="Enter email"/>

我想使用相同的机制在textarea中包含多行占位符文本，可能是这样的：

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

但是那些\n出现在文本中并且不会导致换行...有没有办法让多行占位符？

更新：我实现此功能的唯一方法是使用jQuery Watermark plugin，它在占位符文本中接受HTML：

$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});

Answer 1

specification不允许换行或回车字符。

占位符属性表示一个简短提示（单词或短语）短语）旨在帮助用户输入数据。提示可能是一个样本值或预期格式的简要说明。该如果指定，则属性必须具有不包含U + 000A的值 LINE FEED（LF）或U + 000D CARRIAGE RETURN（CR）字符。

显然，建议更长时间使用title属性。

对于更长的提示或其他咨询文本，title属性更多合适的。

编辑（1/8/18）：

对于<textarea>，情况似乎并非如此。该规范实际上概述了回车符+换行符必须由浏览器呈现。

当元素的值为空字符串且控件未聚焦时（例如，通过将其显示在空白的未聚焦控件中），用户代理应向用户显示此提示。所有U + 000D CARRIAGE RETURN U + 000A LINE FEED字符对（CRLF）中的提示，以及所有其他U + 000D CARRIAGE RETURN（CR）和U + 000A LINE FEED（LF）字符的提示，必须予以处理渲染提示时换行符。

参见文档：http://w3c.github.io/html/sec-forms.html#element-attrdef-textarea-placeholder
也反映在MDN上：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

FWIW，当我尝试使用Chrome 63.0.3239.132时，它确实可以正常工作。

Answer 2

在 most （请参阅下面的详细信息）浏览器中，在javascript中编辑占位符会允许多行占位符。正如已经说过的那样，它不符合specification，你不应该期望它在将来有用（编辑：它确实有效）。

此示例替换所有多行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

基于评论，似乎有些浏览器会接受此黑客攻击而其他浏览器则不接受这是我运行的测试（使用browsertshots和browserstack）

的结果

Chrome：＆gt; = 35.0.1916.69
Firefox：＆gt; = 35.0（结果因平台而异）
IE：＆gt; = 10
基于KHTML的浏览器：4.8
Safari：否（已测试= Safari 8.0.6 Mac OS X 10.8）
Opera：No（测试＆lt; = 15.0.1147.72）

基于statistics，这意味着它适用于当前（2015年10月）使用的浏览器的 88.7％。

更新：今天，它至少可用于 94.4％当前（2018年7月）使用过的浏览器。

Answer 3

我发现如果您使用大量空格，浏览器将正确包装它。不要担心使用确切数量的空格，只需在那里扔很多，浏览器应该正确地换行到下一行的第一个非空格字符。

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

Answer 4

实际上有一个hack可以在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";
}

<强> Demo Fiddle

如果s.o.那将是非常好的可以在Firefox上使用类似的演示。

Answer 5

html5 spec明确拒绝占位符字段中的新行。当在占位符中显示换行符时，Webkit / will / 的版本会插入新行，但这是不正确的行为，不应该依赖它。

我猜段落对w3来说不够简短;）

Answer 6

如果您使用的是AngularJS，您只需使用大括号放置您喜欢的内容：Here's a fiddle.

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

Answer 7

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

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

＆＃13;

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

＆＃13;

Answer 8

您可以尝试使用CSS，它适用于我。此处需要属性placeholder=" "。

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

Answer 9

阵营：

如果您使用的是React，可以按照以下步骤操作：

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

Answer 10

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

应该这样渲染：

Answer 11

显然，只需正常键入即可完成

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

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

Answer 12

Bootstrap + contenteditable + multiline placeholder

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

基于@cyrbil和@daniel回答

使用Bootstrap，jQuery和https://github.com/gr2m/bootstrap-expandable-input在可信的情况下启用占位符。

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

HTML：

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

的CSS：

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

Answer 13

我认为单独使用html / css是不可能的。可能使用JavaScript或其他类型的黑客 - 额外的空格将文本推送到下一行等等。

Answer 14

在php中使用函数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>';

Answer 15

使用Vue.js：

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

Answer 16

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

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

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

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

Answer 17

原帖中的水印解决方案效果很好。谢谢你。如果有人需要它，这里有一个角度指令。

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

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

17 个答案: