Bạn có thể có văn bản giữ chỗ HTML5 nhiều dòng trong <textarea> không?

Tôi có văn bản ma trong các trường văn bản biến mất khi bạn tập trung vào chúng bằng thuộc tính giữ chỗ của HTML5:

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

Tôi muốn sử dụng cơ chế tương tự để có văn bản giữ chỗ nhiều dòng trong văn bản, có thể giống như thế này:

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

Nhưng những \n xuất hiện trong văn bản và không gây ra dòng mới ... Có cách nào để có một trình giữ chỗ nhiều dòng không?

CẬP NHẬT : Cách duy nhất để tôi làm việc này là sử dụng plugin jQuery Watermark , chấp nhận HTML trong văn bản giữ chỗ:

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

Cho <textarea>s spec đặc biệt vạch ra rằng phá vỡ xuống dòng + dòng trong thuộc tính placeholder PHẢI được trả lại như linebreaks bởi trình duyệt.

Tác nhân người dùng nên trình bày gợi ý này cho người dùng khi giá trị của phần tử là chuỗi trống và điều khiển không được tập trung (ví dụ: bằng cách hiển thị nó trong một điều khiển không tập trung trống). Tất cả các cặp ký tự U + 000D CARRIAGE TRẢ LẠI U + 000A LINE CED (CRLF) trong gợi ý, cũng như tất cả các ký tự U + 000D CARRIAGE RETURN (CR) và U + 000A LINE FEED (LF) trong gợi ý, phải được xử lý như ngắt dòng khi hiển thị gợi ý.

Cũng được phản ánh trên MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Euity/textarea#attr-placeholder

FWIW, khi tôi dùng thử Chrome 63.0.3239.132, nó thực sự hoạt động như nó nói.

Trên hầu hết các trình duyệt (xem chi tiết bên dưới), chỉnh sửa trình giữ chỗ trong javascript cho phép giữ chỗ nhiều dòng. Như đã nói, nó không tuân thủ các đặc điểm kỹ thuật và bạn không nên hy vọng nó sẽ hoạt động trong tương lai (chỉnh sửa: nó hoạt động).

Ví dụ này thay thế tất cả các giữ chỗ của multiline 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>

_{Đoạn trích JsFiddle .}

Dựa trên các bình luận, có vẻ như một số trình duyệt chấp nhận hack này và những người khác thì không.
Đây là kết quả của các xét nghiệm Tôi chạy (với browsertshots và browserstack )

• Chrome:> = 35.0.1916,69
• Firefox:> = 35.0 (kết quả khác nhau trên nền tảng)
• IE:> = 10
• Các trình duyệt dựa trên KHTML: 4.8
• Safari: Không (đã kiểm tra = Safari 8.0.6 Mac OS X 10.8)
• Opera: Không (đã kiểm tra <= 15.0.1147.72)

Được hợp nhất với các thống kê luận án , điều này có nghĩa là nó hoạt động trên khoảng 88,7% các trình duyệt hiện đang sử dụng (tháng 10 năm 2015) .

Cập nhật : Hôm nay, nó hoạt động trên ít nhất 94,4% trình duyệt hiện đang sử dụng (tháng 7 năm 2018) .

Tôi thấy rằng nếu bạn sử dụng nhiều khoảng trắng, trình duyệt sẽ bao bọc nó đúng cách. Đừng lo lắng về việc sử dụng một số lượng không gian chính xác, chỉ cần ném thật nhiều vào đó và trình duyệt sẽ bao bọc đúng cách cho ký tự không gian đầu tiên trên dòng tiếp theo.

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

Thực tế có một bản hack giúp thêm các trình giữ chỗ nhiều dòng trong trình duyệt Webkit, Chrome được sử dụng để hoạt động nhưng trong các phiên bản gần đây hơn, họ đã xóa nó:

Đầu tiên, thêm dòng đầu tiên của trình giữ chỗ của bạn vào html5 như bình thường

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

sau đó thêm phần còn lại của dòng bằng css:

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

Nếu bạn muốn giữ các dòng của bạn ở một nơi, bạn có thể thử như sau. Nhược điểm của điều này là các trình duyệt khác ngoài chrome, safari, webkit-vv. thậm chí không hiển thị dòng đầu tiên:

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

sau đó thêm phần còn lại của dòng bằng 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ẽ rất tuyệt, nếu vậy có thể có một bản demo tương tự hoạt động trên Firefox.

Nếu bạn đang sử dụng AngularJS, bạn chỉ cần sử dụng dấu ngoặc nhọn để đặt bất cứ thứ gì bạn thích vào đó: Đây là một câu đố.

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

Theo MDN ,

Trả về vận chuyển hoặc nguồn cấp dữ liệu trong văn bản giữ chỗ phải được coi là ngắt dòng khi hiển thị gợi ý.

Điều này có nghĩa là nếu bạn chỉ cần nhảy sang một dòng mới, nó sẽ được hiển thị chính xác. I E

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

nên kết xuất như thế này:

Thông số html5 từ chối rõ ràng các dòng mới trong trường giữ chỗ. Các phiên bản của Webkit / will / insert dòng mới khi được trình bày với nguồn cấp dữ liệu trong trình giữ chỗ, tuy nhiên đây là hành vi không chính xác và không nên dựa vào.

Tôi đoán đoạn văn không đủ ngắn gọn cho w3;)

Phản ứng:

Nếu bạn đang sử dụng React, bạn có thể làm như sau:

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

Nếu bạn textareacó chiều rộng tĩnh, bạn có thể sử dụng kết hợp không gian không phá vỡ và gói văn bản tự động. Chỉ cần thay thế khoảng trắng to nbsp cho mỗi dòng và đảm bảo rằng hai dòng lân cận không thể khớp với một dòng. Trong thực tế line length > cols/2.

Đây không phải là cách tốt nhất, nhưng có thể là giải pháp đa trình duyệt duy nhất.

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

Bạn có thể thử sử dụng CSS, nó hoạt động với tôi. Thuộc tính placeholder=" "được yêu cầu ở đây.

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

trong php với hàm 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>';

Tôi không nghĩ rằng điều đó là có thể với html / css một mình. Có thể sử dụng JavaScript hoặc một số loại hack khác - thêm khoảng trắng để đẩy văn bản sang dòng tiếp theo, v.v.

Bootstrap + contenteditable + giữ chỗ nhiều dòng

Bản trình diễn: https://jsfiddle.net/39mptojs/4/

dựa trên câu trả lời @cyrbil và @daniel

Sử dụng Bootstrap, jQuery và https://github.com/gr2m/bootstrap-Exandable-input để cho phép giữ chỗ trong nội dung có thể di chuyển.

Sử dụng javascript "giữ chỗ thay thế" và thêm "khoảng trắng: pre" vào css, trình giữ chỗ nhiều dòng được hiển thị.

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

Giải pháp Watermark trong bài viết gốc hoạt động tuyệt vời. Cảm ơn cho nó. Trong trường hợp bất cứ ai cần nó, đây là một chỉ thị góc cho nó.

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