คุณสามารถมีข้อความตัวยึด HTML5 หลายบรรทัดใน <textarea> ได้หรือไม่

ฉันมีข้อความผีในฟิลด์ข้อความที่หายไปเมื่อคุณมุ่งเน้นไปที่พวกเขาโดยใช้คุณลักษณะตัวยึดตำแหน่งของ 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});

สำหรับ<textarea>s ข้อมูลจำเพาะเฉพาะสรุปว่าการแบ่งผลตอบแทนการขนส่ง + สายในแอตทริบิวต์ตัวยึดจะต้องกลายเป็นบรรทัดใหม่โดยเบราว์เซอร์

ตัวแทนผู้ใช้ควรนำเสนอคำแนะนำนี้ให้กับผู้ใช้เมื่อค่าขององค์ประกอบเป็นสตริงว่างเปล่าและไม่ได้รับการควบคุม (เช่นโดยแสดงไว้ในการควบคุมว่างเปล่าที่ไม่มีการโฟกัส) ผลตอบแทนของ U + 000D CARRIAGE U + 000A LINE FEED ตัวละครคู่ (CRLF) ในคำใบ้เช่นเดียวกับ U + 000D ผลตอบแทน CARRIAGE (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 มันใช้งานได้ตามที่ควรจะเป็น

เมื่อวันที่มากที่สุด (ดูรายละเอียดด้านล่าง) เบราว์เซอร์, การแก้ไขตัวยึดใน 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ตัวอย่าง}

ดูเหมือนว่าเบราว์เซอร์บางคนยอมรับการแฮ็กนี้และคนอื่นไม่เห็นด้วย
นี่คือผลลัพธ์ของการทดสอบที่ฉันรัน (ด้วยเบราว์เซอร์ภาพและเบราส์สแต็ค )

• Chrome:> = 35.0.1916.69
• Firefox:> = 35.0 (ผลลัพธ์ขึ้นอยู่กับแพลตฟอร์ม)
• IE:> = 10
• เบราว์เซอร์ที่ใช้ KHTML: 4.8
• Safari: ไม่ (ทดสอบ = Safari 8.0.6 Mac OS X 10.8)
• Opera: ไม่ (ทดสอบ <= 15.0.1147.72)

ผสมกับวิทยานิพนธ์สถิติ , ที่นี้หมายถึงว่าการทำงานที่เกี่ยวกับ88.7%ของปัจจุบัน(ตุลาคม 2015)เบราว์เซอร์ที่ใช้

อัปเดต : วันนี้ใช้งานได้กับเบราว์เซอร์ที่ใช้งานอย่างน้อย94.4%ของปัจจุบัน(กรกฎาคม 2018)

ฉันพบว่าถ้าคุณใช้พื้นที่มากเบราว์เซอร์จะทำการพันคำอย่างถูกต้อง ไม่ต้องกังวลเกี่ยวกับการใช้ช่องว่างจำนวนที่แน่นอนเพียงแค่โยนจำนวนมากลงไปในนั้นและเบราว์เซอร์ควรจะตัดเป็นอักขระช่องว่างตัวแรกในบรรทัดถัดไป

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

มีแฮ็คจริงซึ่งทำให้สามารถเพิ่มตัวยึดหลายบรรทัดในเบราว์เซอร์ 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-etc ไม่ต้องแสดงบรรทัดแรก:

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

ซอ Fiddle

มันจะดีมากถ้าเป็นเช่นนั้นจะได้รับการสาธิตที่คล้ายกันทำงานบน Firefox

หากคุณใช้ AngularJS คุณสามารถใช้เครื่องมือจัดฟันเพื่อวางสิ่งที่คุณต้องการ: นี่คือซอ

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

ตาม 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> 

ควรแสดงผลเช่นนี้:

ข้อมูลจำเพาะ HTML5ชัดปฏิเสธสายใหม่ในฟิลด์เจ้าของสถานที่ รุ่นของ Webkit / จะ /แทรกบรรทัดใหม่เมื่อแสดงด้วยตัวดึงข้อมูลบรรทัดในตัวยึดตำแหน่งอย่างไรก็ตามนี่เป็นลักษณะการทำงานที่ไม่ถูกต้องและไม่ควรเชื่อถือ

ฉันเดาว่าย่อหน้าไม่สั้นพอสำหรับ w3;)

ตอบสนอง:

หากคุณกำลังใช้ React คุณสามารถทำได้ดังนี้:

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

หากคุณtextareaมีความกว้างคงที่คุณสามารถใช้การรวมกันของพื้นที่ไม่แตกและการตัดข้อความอัตโนมัติ เพียงแค่แทนที่ช่องว่างเป็นทุกบรรทัดและตรวจสอบให้แน่ใจว่าเส้นเพื่อนบ้านสองเส้นไม่สามารถรวมเป็นหนึ่งบรรทัดได้ 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>

คุณสามารถลองใช้ CSS มันได้ผลกับฉัน ต้องระบุแอตทริบิวต์placeholder=" "ที่นี่

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

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

ฉันไม่คิดว่าเป็นไปได้ด้วย html / css เพียงอย่างเดียว อาจเป็นไปได้โดยใช้ JavaScript หรือแฮ็คชนิดอื่น - มีช่องว่างเพิ่มเติมเพื่อดันข้อความไปยังบรรทัดถัดไป ฯลฯ

Bootstrap + contenteditable + ตัวยึดหลายบรรทัด

การสาธิต: https://jsfiddle.net/39mptojs/4/

ตาม @cyrbil และ @daniel คำตอบ

ใช้ Bootstrap, jQuery และhttps://github.com/gr2m/bootstrap-expandable-inputเพื่อเปิดใช้งานตัวยึดตำแหน่งใน contenteditable

การใช้ "ตัวยึดแทนที่" จาวาสคริปต์และเพิ่ม "white-space: 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;
}

วิธีการแก้ปัญหาลายน้ำในโพสต์ต้นฉบับใช้งานได้ดี ขอบคุณสำหรับมัน ในกรณีที่ทุกคนต้องการมันนี่เป็นคำสั่งเชิงมุมสำหรับมัน

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