<textarea> öğesinde çok satırlı HTML5 yer tutucu metniniz olabilir mi?

HTML5'in yer tutucu özniteliğini kullanarak onlara odaklandığınızda kaybolan metin alanlarında hayalet metin var:

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

Aynı mekanizmayı bir textarea'da çok satırlı yer tutucu metne sahip olmak, belki de böyle bir şey kullanmak istiyorum:

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

Ancak \nbunlar metinde görünür ve satırsonlarına neden olmaz ... Çok satırlı bir yer tutucusuna sahip olmanın bir yolu var mı?

GÜNCELLEME : Bunu çalışmanın tek yolu jQuery Watermark eklentisini kullanmaktı , bu da yer tutucu metinde HTML'yi kabulediyordu:

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

İçin <textarea>s Spec özellikle tutucu özelliğinde olduğu satır başları + satır sonları tarayıcı tarafından satır aralıklarında olarak görüntülenecek MUTLAKA özetliyor.

Kullanıcı aracıları, öğenin değeri boş dize olduğunda ve denetim odaklanmadığında (örneğin, boş, odaklanmamış bir denetim içinde görüntülenerek) bu ipucunu kullanıcıya sunmalıdır. Tüm U + 000D TAŞIMA İADE U + 000A LINE FEED karakter çiftleri (CRLF) ve ipucundaki diğer tüm U + 000D CARRIAGE RETURN (CR) ve U + 000A LINE FEED (LF) karakterleri işlenmelidir ipucu oluşturulurken satır kesilir.

Ayrıca MDN'ye de yansıyor: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, Chrome 63.0.3239.132'yi denediğimde, olması gerektiği gibi çalışıyor.

On en javascript tutucu satırlı yer tutucu verir düzenleme, tarayıcılar (ayrıntılar aşağıdadır). Söylendiği gibi, şartname ile uyumlu değildir ve gelecekte çalışmasını beklememelisiniz (değiştir: çalışır).

Bu örnek, tüm çok satırlı textarea'nın yer tutucusunun yerini alır .

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 snippet'i.}

Yorumlara göre, bazı tarayıcılar bu hack'i kabul ediyor ve diğerleri kabul etmiyor gibi görünüyor.
Bu, çalıştırdığım testlerin sonuçlarıdır ( tarayıcı görüntüleri ve tarayıcılarla )

• Krom:> = 35.0.1916.69
• Firefox:> = 35.0 (sonuçlar platforma göre değişir)
• IE:> = 10
• KHTML tabanlı tarayıcılar: 4.8
• Safari: Hayır (test edildi = Safari 8.0.6 Mac OS X 10.8)
• Opera: Hayır (test edilmiş <= 15.0.1147.72)

Tez istatistikleri ile birleştiğinde , şu anda kullanılan tarayıcıların (Ekim 2015) yaklaşık % 88,7'sinde çalıştığı anlamına gelir .

Güncelleme : Bugün, şu anda (Temmuz 2018) kullanılan tarayıcıların en az % 94,4'ünde çalışıyor .

Çok fazla alan kullanırsanız, tarayıcının düzgün bir şekilde saracağını görüyorum. Kesin sayıda boşluk kullanma konusunda endişelenmeyin, oraya çok şey atın ve tarayıcı bir sonraki satırdaki ilk boşluk olmayan karaktere düzgün bir şekilde sarılmalıdır.

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

Webkit tarayıcılarına çok satırlı yer tutucuları eklemeyi mümkün kılan gerçek bir saldırı var, Chrome eskiden çalıştı ancak daha yeni sürümlerde kaldırdılar:

Önce yer tutucunuzun ilk satırını her zamanki gibi html5'e ekleyin

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

sonra satırın geri kalanını css ile ekleyin:

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

Çizgilerinizi tek bir yerde tutmak istiyorsanız aşağıdakileri deneyebilirsiniz. Bunun dezavantajı, krom, safari, webkit vb.'den başka tarayıcıların olmasıdır. ilk satırı bile gösterme:

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

sonra satırın geri kalanını css ile ekleyin:

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

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

Demo Keman

Firefox üzerinde benzer bir demo çalıştırabilseydiniz çok harika olurdu.

AngularJS kullanıyorsanız, içine istediğinizi yerleştirmek için parantez kullanabilirsiniz: İşte bir keman.

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

MDN'ye göre ,

Yer tutucu metindeki satır başları veya satır beslemeleri ipucu oluşturulurken satır sonları olarak değerlendirilmelidir.

Bu, yeni bir satıra atlarsanız, doğru bir şekilde oluşturulması gerektiği anlamına gelir. yani

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

şöyle olmalıdır:

Html5 Spec açıkça yer tutucu alanında yeni çizgiler reddeder. Webkit / sürümleri yer tutucuda satır beslemeleriyle sunulduğunda yeni satırlar ekleyecek / ekleyecektir, ancak bu yanlış bir davranıştır ve buna güvenilmemelidir.

Paragraflar w3 için yeterince kısa değil;)

Tepki:

React kullanıyorsanız, bunu aşağıdaki gibi yapabilirsiniz:

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

Eğer senin textareaEğer bölünemez boşluk ve otomatik textarea sarma kombinasyonunu kullanabilirsiniz genişliği bir statik var. Her satır için nbsp olarak boşlukları değiştirin ve iki komşu hattın bir taneye sığmayacağından emin olun. Uygulamada line length > cols/2.

Bu en iyi yol değildir, ancak tek tarayıcılar arası çözüm olabilir.

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

CSS kullanmayı deneyebilirsiniz, benim için çalışıyor. Özellik placeholder=" "burada gereklidir.

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

işlev chr (13) ile php olarak:

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

Sadece html / css ile mümkün olduğunu düşünmüyorum. JavaScript veya başka bir tür hack kullanarak mümkün olabilir - metni bir sonraki satıra taşımak için fazladan boşluklar, vb.

Bootstrap + içerik düzenlenebilir + çok satırlı yer tutucu

Demo: https://jsfiddle.net/39mptojs/4/

@cyrbil ve @daniel cevabına dayanarak

İçerik tutucuda yer tutucuyu etkinleştirmek için Bootstrap, jQuery ve https://github.com/gr2m/bootstrap-expandable-input kullanma.

"Placeholder replace" javascript'i kullanarak ve css'e "white-space: pre" ekleyerek çok satırlı yer tutucu gösterilir.

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

Orijinal yazıdaki filigran çözümü harika çalışıyor. Bunun için teşekkürler. Herhangi birinin buna ihtiyacı varsa, işte bunun için açısal bir direktif var.

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