你可以在一個多行的 HTML5 占位符文本<textarea> ?

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 插件，它接受占位符文本中的 HTML：

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

Answer 1

對於<textarea> s ，規范特別概述了占位符屬性中的回車+換行符必須被瀏覽器呈現為換行符。

當元素的值是空字符串並且控件沒有獲得焦點時（例如，通過將它顯示在一個空白的未聚焦控件中），用戶代理應該向用戶呈現這個提示。 提示中的所有 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 時，它確實像它所說的那樣工作。

Answer 2

在大多數（參見下面的詳細信息）瀏覽器中，在 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片段。}

預期結果

---

根據評論，似乎有些瀏覽器接受這種黑客攻擊，而另一些則不接受。
這是我運行的測試結果（使用browsertshots和browserstack ）

• 鉻：> = 35.0.1916.69
• Firefox：>= 35.0（結果因平台而異）
• IE: >= 10
• 基於 KHTML 的瀏覽器：4.8
• Safari：否（已測試 = Safari 8.0.6 Mac OS X 10.8）
• 歌劇：否（測試 <= 15.0.1147.72）

與這些統計數據相結合，這意味着它適用於目前（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";
}

---

演示小提琴

如果可以在 Firefox 上獲得類似的演示，那就太好了。

Answer 5

根據 MDN ，

在呈現提示時，占位符文本中的回車符或換行符必須被視為換行符。

這意味着如果你只是跳到一個新行，它應該被正確渲染。 IE

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

如果您使用的是 AngularJS，您可以簡單地使用大括號來放置您想要的任何內容：這是一個小提琴。

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

Answer 7

反應：

如果您使用的是 React，則可以按如下方式進行：

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

Answer 8

這顯然可以通過正常輸入來完成，

 <textarea name="" id="" placeholder="Hello awesome world. I will break line now Yup! Line break seems to work."></textarea>

Answer 9

html5 規范明確拒絕占位符字段中的新行。 當在占位符中顯示換行符時，Webkit 的版本/will/插入新行，但這是不正確的行為，不應依賴。

我想段落對於 w3 來說不夠簡短；)

Answer 10

如果您的textarea具有靜態寬度，您可以使用不間斷空格和自動 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>

Answer 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

Answer 12

您可以嘗試使用 CSS，它對我有用。 這里需要屬性placeholder=" " 。

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

Answer 13

使用Vue.js ：

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

Answer 14

Bootstrap + contenteditable + 多行占位符

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

基於@cyrbil 和@daniel 的回答

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

使用“占位符替換”javascript 並將“空白：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);
        }
    });
});

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 15

如果您使用的是像 Aurelia 這樣的框架，它允許將視圖模型屬性綁定到 HTML5 元素屬性，那么您可以執行以下操作：

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

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

在這種情況下，當綁定到元素時，會考慮回車和換行。

Answer 16

我認為單獨使用html / css是不可能的。 可能使用JavaScript或其他類型的黑客 - 額外的空格將文本推送到下一行，等等。

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