您可以在 <textarea> 中包含多行 HTML5 占位符文本吗？答案

【问题标题】：Can you have multiline HTML5 placeholder text in a <textarea>?您可以在 <textarea> 中包含多行 HTML5 占位符文本吗？
【发布时间】：2011-11-03 14:10:45
【问题描述】：

当您使用 HTML5 的占位符属性关注它们时，我在文本字段中出现了幻影文本：

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

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

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

但是那些\ns 出现在文本中并且不会引起换行符...有没有办法使用多行占位符？

更新：我让它工作的唯一方法是利用jQuery Watermark plugin，它接受占位符文本中的HTML：

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

【问题讨论】：

IE 似乎可以正确处理它。 Firefox OTOH 只是忽略换行符
stackoverflow.com/questions/7312623/… 是一个非常相似的问题，也有很好的答案。
如果您遇到这种情况并使用 js 设置值检查 css white-space 以确保它设置正确，例如预包装
从另一个问题来看：&#10; 可以在除 Safari 之外的任何地方使用。

标签： html textarea forms placeholder

【解决方案1】：

对于<textarea>s the spec 特别概述了占位符属性中的回车+换行符必须由浏览器呈现为换行符。

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

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

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

【讨论】：

除了 title 属性的行为方式不同，即它不显示幽灵内容。事实上，占位符支持文本区域的多行是非常合适的，因为文本区域是多行的生物。可惜规范不允许。我想黑客将不得不这样做。叹息

【解决方案2】：

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

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

【讨论】：

Webkit 的行为并没有错，因为规范没有说明如果 CR/LF 确实存在必须发生什么。
@Christian 现在确实如此，它说“用户代理应该在删除换行符之后向用户呈现这个提示......”。它说关于剥离换行符：“当用户代理要从字符串中剥离换行符时，用户代理必须从该字符串中删除任何“LF”（U + 000A）和“CR”（U + 000D）字符。 "。
这个答案不再正确。 spec 现在明确要求占位符中的换行符呈现为换行符。

【解决方案3】：

我发现如果你使用很多空格，浏览器会正确地换行。不用担心使用确切数量的空格，只需在其中添加很多，浏览器应该会正确换行到下一行的第一个非空格字符。

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

【讨论】：

是的，跨浏览器不支持多行占位符，发现最新的 safari 确实支持，但在 IOS5 上绝对不支持
这在 IE 和 Firefox Windows 中都不适用于我。它只是插入我要求的空格
Chrome 37 在 textarea 中显示占位符文本而不去除换行符。有谁知道“功能”的名称是什么，以便我可以a）查找它，b）测试它？

【解决方案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

如果可以的话，那就太好了。可以在 Firefox 上获得类似的演示。

【讨论】：

感谢提供小提琴链接。它使验证各种浏览器中的行为变得容易。在 IE 10 和 FF 12 (Windows) 上，这两个版本都失败了。可惜。 Safari 6.1 有效 :(
不再在 Chrome 中工作 - 我想现在很长时间了。

【解决方案5】：

您可以尝试使用 CSS，它对我有用。这里需要属性placeholder=" "。

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

【讨论】：

【解决方案6】：

在大多数（见下文）浏览器上，在 javascript 中编辑占位符允许多行占位符。正如已经说过的那样，它不符合specification，你不应该期望它在未来可以工作（编辑：它确实有效）。

这个例子替换了 all 多行文本区域的占位符。

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>

_{JsFiddlesn-p.}

预期结果

根据 cmets，似乎有些浏览器接受这种 hack 而其他浏览器不接受。
这是我运行的测试结果（browsertshots 和 browserstack）

铬：>= 35.0.1916.69
Firefox：>= 35.0（结果因平台而异）
IE：>= 10
基于 KHTML 的浏览器：4.8
Safari：否（已测试 = Safari 8.0.6 Mac OS X 10.8）
Opera：否（已测试

与论文statistics 融合，这意味着它可以在当前（2015 年 10 月） 使用的浏览器中使用大约 88.7%。

更新：今天，至少 94.4% 目前（2018 年 7 月） 使用的浏览器都可以使用它。

【讨论】：

那个 jsfiddle 示例根本不起作用......它只是多行的，因为 textarea 的大小。
有一个错字，但我无法编辑，因为 StackOverflow 给我这个“编辑必须至少 6 个字符”错误。你的班级应该是multiline 而不是multiligne
@sebnukem：它适用于我测试过的大多数浏览器。这与 textarea 的大小无关。您能否提供有关您遇到的问题的更多信息？
似乎在 safari 上不起作用... - \n 消失了，但所有内容都在一行中
@Jroonk：我可以确认。这不是因为 chrome，而是因为 Apple 强迫任何浏览器使用其 IOS 的WKWebView。随后，IOS 上的任何浏览器都无法正确呈现此 hack，直到 WKWebView 完成。

【解决方案7】：

Bootstrap + contenteditable + 多行占位符

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

基于@cyrbil 和@daniel 的回答

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

使用“占位符替换”javascript并将“空白：pre”添加到css，显示多行占位符。

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

【讨论】：

【解决方案8】：

如果您的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>

【讨论】：

【解决方案9】：

如果你使用 AngularJS，你可以简单地使用大括号来放置你想要的东西：Here's a fiddle.

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

【讨论】：

我正在使用类似的方法，但它在 Safari 和 Firefox 中不起作用

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

在带有函数 chr(13) 的 php 中：

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 字符代码 13 chr(13) 称为回车或 CR

【讨论】：

这对我有用，但你能解释一下它背后的逻辑或理论吗？

【解决方案12】：

反应：

如果你使用 React，你可以这样做：

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

【讨论】：

【解决方案13】：

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>

应该像这样渲染：

【讨论】：

在最新的 Chrome 中工作。

【解决方案14】：

与Vue.js:

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

【讨论】：

另一种方式:placeholder="`/robots.txt \r\n /google-analytics-auth.html`"

【解决方案15】：

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

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

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

【讨论】：

【解决方案16】：

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

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

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

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

【讨论】：