ฉันลองสองสามวิธีแล้ว แต่ก็ไม่ได้ผล ไม่มีใครรู้เคล็ดลับที่ดีที่จะได้รับรอบนี้หรือไม่?

<textarea placeholder='This is a line \n this should be a new line'></textarea>

<textarea placeholder='This is a line     
should this be a new line?'></textarea> <!-- this works in chrome apparently -->

ปรับปรุง: มันไม่ทำงานในโครเมี่ยม มันเป็นเพียงความกว้างของ textarea

ดู: http://jsfiddle.net/pdXRx/

สิ่งที่คุณสามารถทำได้คือเพิ่มข้อความvalueที่เกี่ยวข้องกับการขึ้นบรรทัด\nใหม่

$('textarea').attr('value', 'This is a line \nthis should be a new line');

จากนั้นคุณสามารถลบมันในfocusและนำมันกลับมา (ถ้าว่าง) blurบน บางสิ่งเช่นนี้

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);

$('textarea').focus(function(){
    if($(this).val() === placeholder){
        $(this).attr('value', '');
    }
});

$('textarea').blur(function(){
    if($(this).val() ===''){
        $(this).attr('value', placeholder);
    }    
});

ตัวอย่าง: http://jsfiddle.net/airandfingers/pdXRx/247/

ไม่ใช่ CSS บริสุทธิ์และไม่สะอาดแต่มีเคล็ดลับ

คุณสามารถแทรกเอนทิตี html บรรทัดใหม่
ภายในแอตทริบิวต์ตัวยึดตำแหน่ง:

<textarea name="foo" placeholder="hello you&#10;Second line&#10;Third line"></textarea>

ใช้งานได้กับ: Chrome 62, IE10, Firefox 60

ใช้งานไม่ได้: Safari 11

https://jsfiddle.net/lu1s/bxkjLpag/2/

อย่าคิดว่าคุณได้รับอนุญาตให้ทำเช่นนั้น: http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

เนื้อหาที่เกี่ยวข้อง (เหมืองเน้น):

คุณลักษณะตัวยึดตำแหน่งแสดงถึง คำใบ้สั้น ๆ (คำหรือวลีสั้น ๆ ) ที่มีวัตถุประสงค์เพื่อช่วยเหลือผู้ใช้ในการป้อนข้อมูลเมื่อตัวควบคุมไม่มีค่า คำใบ้อาจเป็นค่าตัวอย่างหรือคำอธิบายสั้น ๆ ของรูปแบบที่คาดหวัง แอ็ตทริบิวต์หากระบุจะต้องมีค่าที่ไม่มี U + 000A LINE FEED (LF) หรือ U + 000D CARRIAGE RETURN (CR) อักขระ

อัปเดต (ม.ค. 2559):แฮ็คตัวเล็ก ๆ อาจไม่ทำงานบนเบราว์เซอร์ทั้งหมดอีกต่อไปดังนั้นฉันจึงมีโซลูชันใหม่พร้อมจาวาสคริปต์เล็ก ๆ ด้านล่าง

แฮ็คน้อยที่ดี

รู้สึกไม่ดี แต่คุณสามารถใส่บรรทัดใหม่ใน html ได้ แบบนี้:

<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
        1 Long St
        London
        Postcode
        UK"></textarea>

สังเกตว่าแต่ละบรรทัดอยู่ในบรรทัดใหม่ (ไม่ได้ถูกห่อ) และเยื้อง 'แท็บ' แต่ละแท็บคือ 4 ช่องว่าง ได้รับมันไม่ใช่วิธีที่ดีมาก แต่ดูเหมือนว่าจะทำงาน:

http://jsfiddle.net/01taylop/HDfju/

• เป็นไปได้ว่าระดับการเยื้องของแต่ละบรรทัดจะแตกต่างกันไปตามความกว้างของพื้นที่ข้อความของคุณ
• มันเป็นสิ่งสำคัญที่จะมีresize: none;ใน css เพื่อให้ขนาดของ textarea ได้รับการแก้ไข (ดู jsfiddle)

อีกทางเลือกหนึ่ง เมื่อคุณต้องการขึ้นบรรทัดใหม่ให้กดส่งคืนสองครั้ง (ดังนั้นจะมีบรรทัดว่างระหว่าง 'บรรทัดใหม่' ของคุณการสร้าง 'บรรทัดว่าง' นี้จำเป็นต้องมีแท็บ / ช่องว่างเพียงพอที่จะเท่ากับความกว้างของ textarea ของคุณ ดูเหมือนจะมีความสำคัญถ้าคุณมีมากเกินไปคุณแค่ต้องการพอนี่สกปรกมากและอาจไม่เข้ากันได้กับเบราว์เซอร์ฉันหวังว่าจะมีวิธีที่ง่ายกว่านี้!

ทางออกที่ดีกว่า

ตรวจสอบJSFiddle

• วิธีการแก้ปัญหานี้ตำแหน่ง div หลัง textarea
• จาวาสคริปต์บางตัวใช้เพื่อเปลี่ยนสีพื้นหลังของ textarea ซ่อนหรือเปิดเผยตัวยึดตำแหน่งอย่างเหมาะสม
• อินพุตและตัวยึดต้องมีขนาดแบบอักษรเดียวกันดังนั้นทั้งสองมิกซ์อิน
• box-sizingและdisplay: blockคุณสมบัติในการ textarea มีความสำคัญหรือ div ที่อยู่เบื้องหลังมันจะไม่เป็นขนาดเดียวกัน
• การตั้งค่าresize: verticalและ a min-heightบน textarea ก็มีความสำคัญเช่นกันโปรดสังเกตว่าตัวยึดข้อความจะตัดและขยาย textarea อย่างไรจะรักษาพื้นหลังสีขาว อย่างไรก็ตามการแสดงความคิดเห็นออกresizeคุณสมบัติจะทำให้เกิดปัญหาเมื่อขยาย textarea แนวนอน
• เพียงตรวจสอบให้แน่ใจว่าความสูงขั้นต่ำของ textarea นั้นเพียงพอที่จะครอบคลุมพื้นที่ที่คุณยึดไว้ทั้งหมดด้วยความกว้างที่เล็กที่สุด **

HTML:

<form>
  <input type='text' placeholder='First Name' />
  <input type='text' placeholder='Last Name' />
  <div class='textarea-placeholder'>
    <textarea></textarea>
    <div>
      First Line
      <br /> Second Line
      <br /> Third Line
    </div>
  </div>
</form>

SCSS:

$input-padding: 4px;

@mixin input-font() {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
}

@mixin placeholder-style() {
  color: #999;
  @include input-font();
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form {
  width: 250px;
}

input,textarea {
  display: block;
  width: 100%;
  padding: $input-padding;
  border: 1px solid #ccc;
}

input {
  margin-bottom: 10px;
  background-color: #fff;

  @include input-font();
}

textarea {
  min-height: 80px;
  resize: vertical;
  background-color: transparent;
  &.data-edits {
    background-color: #fff;
  }
}

.textarea-placeholder {
  position: relative;
  > div {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: $input-padding;
    background-color: #fff;
    @include placeholder-style();
  }
}

::-webkit-input-placeholder {
  @include placeholder-style();
}
:-moz-placeholder {
  @include placeholder-style();
}
::-moz-placeholder {
  @include placeholder-style();
}
:-ms-input-placeholder {
  @include placeholder-style();
}

javascript:

$("textarea").on('change keyup paste', function() {
  var length = $(this).val().length;
  if (length > 0) {
    $(this).addClass('data-edits');
  } else {
    $(this).removeClass('data-edits');
  }
});

วิธีแก้ปัญหา CSS: http://cssdeck.com/labs/07fwgrso

::-webkit-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

::-moz-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

:-ms-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

Salaamun Alekum




ใช้งานได้กับ Google Chrome

<textarea placeholder="Enter Choice#1 &#10;Enter Choice#2 &#10;Enter Choice#3"></textarea>

ฉันทดสอบสิ่งนี้บน Windows 10.0 (Build 10240) และ Google Chrome เวอร์ชัน 47.0.2526.80 m

08:43:08 AST 6 Rabi Al-Awwal, 1437 พฤหัสบดี, 17 ธันวาคม 2558

ขอบคุณ

เพิ่มเพียง & # 10 สำหรับการขึ้นบรรทัดใหม่ไม่จำเป็นต้องเขียน CSS หรือจาวาสคริปต์

textarea{
    width:300px;
    height:100px;

}

<textarea placeholder='This is a line this &#10should be a new line'></textarea>

<textarea placeholder=' This is a line 

should this be a new line?'></textarea>

คำตอบเก่า:

ไม่คุณไม่สามารถทำได้ในแอตทริบิวต์ตัวยึดตำแหน่ง คุณไม่สามารถเข้ารหัส HTML ขึ้นบรรทัดใหม่เหมือน
ในตัวยึดตำแหน่งได้

คำตอบใหม่:

เบราว์เซอร์สมัยใหม่ให้คุณได้หลายวิธีในการทำเช่นนี้ ดู JSFiddle นี้:

http://jsfiddle.net/pdXRx/5/

ใช้
แทน\nสิ่งนี้จะเปลี่ยนสาย

ลองสิ่งนี้:

<textarea
placeholder="Line1&#x0a;&#x09;&#x09;&#x09;Line2"
cols="10"
rows="5"
style="resize:none">
</textarea>

http://jsfiddle.net/vr79B/

คุณไม่สามารถทำได้ด้วย HTML บริสุทธิ์ แต่ปลั๊กอิน jQuery นี้จะช่วยให้คุณ: https://github.com/bradjasper/jQuery-Placeholder-Newlines

คำตอบของ Jason Gennaro รุ่นปรับปรุงเล็กน้อย (ดูความคิดเห็นของโค้ด):

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);
$('textarea').focus(function(){
    if($(this).val() == placeholder){
        // reset the value only if it equals the initial one    
        $(this).attr('value', '');
    }
});
$('textarea').blur(function(){
    if($(this).val() == ''){
        $(this).attr('value', placeholder);
    }    
});
// remove the focus, if it is on by default
$('textarea').blur();

ฉันชอบงานของ Jason Gennaro และ Denis Golomazov แต่ฉันต้องการบางสิ่งที่จะมีประโยชน์มากขึ้นทั่วโลก ฉันได้ปรับเปลี่ยนแนวคิดเพื่อให้สามารถเพิ่มไปยังหน้าใดก็ได้โดยไม่มีการสะท้อนกลับ

http://jsfiddle.net/pdXRx/297/

<h1>Demo: 5 different textarea placeholder behaviors from a single JS</h1>

<h2>Modified behaviors</h2>

<!-- To get simulated placeholder with New Lines behavior,
     add the placeholdernl attribute -->

<textarea placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address' placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<h2>Standard behaviors</h2>

<textarea placeholder='Address'>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address'></textarea>

จาวาสคริปต์นั้นง่ายมาก

<script>
(function($){
var handleFocus = function(){
    var $this = $(this);
    if($this.val() === $this.attr('placeholdernl')){
        $this.attr('value', '');
        $this.css('color', '');
    }
};

var handleBlur = function(){
    var $this = $(this);
    if($this.val() == ''){
        $this.attr('value', $this.attr('placeholdernl'))
        $this.css('color', 'gray');
    }    
};

$('textarea[placeholdernl]').each(function(){
    var $this = $(this),
        value = $this.attr('value'),
        placeholder = $this.attr('placeholder');
    $this.attr('placeholdernl', value ? value : placeholder);
    $this.attr('value', '');
    $this.focus(handleFocus).blur(handleBlur).trigger('blur');
});
})(jQuery);
</script>

HTML

<textarea data-placeholder="1111\n2222"></textarea>

JS

$('textarea[data-placeholder]').each(function(){
    var $this = $(this),
        placeholder = $this.data('placeholder'),
        placeholderSplit = placeholder.split('\\n');
    placeholder = placeholderSplit.join('\n');
    $this.focus(function(){
        var $this = $(this);
        if($this.val() === placeholder){
            $this.val('');
            // $this.removeClass('placeholder');
        }
    }).blur(function(){
        var $this = $(this);
        if($this.val() == '') {
            $this.val(placeholder);
            // $this.addClass('placeholder');
        }
    }).trigger('blur');
});

Textarea เคารพคุณสมบัติ white-space สำหรับตัวยึดตำแหน่ง https://www.w3schools.com/cssref/pr_text_white-space.asp

การตั้งค่าเป็น pre-line แก้ไขปัญหาให้ฉัน

textarea {
  white-space: pre-line;
}

<textarea placeholder='This is a line     
should this be a new line'></textarea>

ผมปรับเปลี่ยนซอ @ Richard Bronosky ของเช่นนี้

เป็นวิธีการที่ดีกว่าในการใช้data-*แอตทริบิวต์แทนที่จะเป็นแอตทริบิวต์ที่กำหนดเอง ฉันแทนที่<textarea placeholdernl>การ<textarea data-placeholder>และรูปแบบอื่น ๆ บางส่วนเช่นกัน

แก้ไข
นี่คือคำตอบดั้งเดิมของ Richard ซึ่งมีข้อมูลโค้ดเต็ม

ง่ายมาก

  var position = your break position;
    var breakLine = "
";//in html 
    var output = [value.slice(0, position), breakLine, value.slice(position)].join('');
    return output;

value แทนสตริงเดิม

ลองดูโซลูชันนี้พร้อมตัวยึดตำแหน่งที่กำหนดเอง

• คุณได้ตัวยึดหลายบรรทัดที่ใช้ได้กับเบราว์เซอร์ทุกประเภท
• มันเป็นไปได้ที่จะปรับแต่งตัวแทนจำหน่ายตามที่คุณต้องการ

การสาธิตเกี่ยวกับไวโอลิน

$(document).on('input', '#textArea', function () {
	
        if ($('#textArea').val()) {
            $('#placeholderDiv').hide();
        } else {
            $('#placeholderDiv').show();
        }   
});

#textAreaWrap {
    position: relative;
    background-color: white;
}

#textArea {
    position: relative;
    z-index: 1;
    width: 350px;
    height: 100px;
    min-height: 100px;
    padding: 6px 12px;
    resize: vertical;
    background-color: transparent;
    /* When set background-color: transparent - Firefox  displays
    unpleasant textarea border. Set border style to fix it.*/
    border: 1px solid #a5a5a5;
}

#placeholderDiv {
    position: absolute;
    top: 0;
    padding: 6px 13px;
    color: #a5a5a5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="textAreaWrap">
    
<textarea id="textArea"></textarea>

<!-- Check here. If textarea has content -
     set for this div attribute style="display: none;" -->
<div id="placeholderDiv">Multiline textarea<br>
                         placeholder<br>
                         <br>
                         that works in Firefox</div>
    
</div>

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

แก้ไข:

ตอนนี้ยังจัดการกับกรณีพิเศษเช่นการแทรกตัวยึดตำแหน่งได้อย่างถูกต้อง

var textarea = document.getElementById("textarea");
new Placeholder(textarea, "Line 1\nLine 2\nLine 3");

function Placeholder(el, placeholder) {
    if (el.value == "" || el.value == placeholder) {
        el.style.color = "gray";
        el.value = placeholder;
        el._plc = true;
        el.className += " unselectable";
    }
    function keyPress(e) {
        window.setTimeout(function() {
            var replaced = reverseStr(el.value).replace(reverseStr(placeholder), "");
            
            if (el.value == "") {
                el.value = placeholder;
                el.style.color = "gray";
                cursorToStart(el);
                el._plc = true;
                el.className += " unselectable";
            } else if (el._plc && el.value.endsWith(placeholder) && replaced !== "") {
                el.value = reverseStr(replaced);
                el.style.color = "black";
                el._plc = false;
                el.readOnly = false;
                el.className = el.className.replace("unselectable", "");
            } else if (el._plc && el.readOnly) {
                var ch = String.fromCharCode(e.charCode);
                if (e.keyCode == 13) ch = "\n";     // ENTER
                else if (e.charCode == 0) return;   // non-character keys
                
                el.value = ch;
                el.style.color = "black";
                el._plc = false;
                el.readOnly = false;
                el.className = el.className.replace("unselectable", "");
            }
        }, 10);
    }
    el.addEventListener("keypress", keyPress, false);
    el.addEventListener("paste", keyPress, false);
    el.addEventListener("cut", keyPress, false);
    el.addEventListener("mousedown", function() {
        if (el._plc) el.readOnly = true;
    }, false);
    el.addEventListener("mouseup", function() {
        el.readOnly = false;
        if (el._plc) cursorToStart(el);
    }, false);
  
    function cursorToStart(input) {
        if (input.createTextRange) {
            var part = input.createTextRange();
            part.move("character", 0);
            part.select();
        } else if (input.setSelectionRange){
            input.setSelectionRange(0, 0);
        } input.focus();
    }
    function reverseStr(str) {
        if (!str) return "";
        return str.split("").reverse().join("");
    }
}

textarea {
    border: 1px solid gray;
    padding: 3px 6px;
    font-family: Arial;
    font-size: 13px;
    transition: .2s;
}
textarea:hover, textarea:focus {
    border-color: #2277cc;
}
textarea:focus {
    box-shadow: inset 0 0 5px #85B7E9;
}
*.unselectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

<textarea id="textarea"></textarea>

ปัญหานี้สามารถแก้ไขได้โดยใช้ตัวเลือกที่แสดงให้เห็นว่าตัวยึดและพื้นหลังที่กำหนดไว้สูงหากการใช้งานของคุณอนุญาต:

textarea:not(:placeholder-shown) {
  background: #fff;
}

div {
  top: 0;
  left: 14px;
  color: rgba(0,0,0,0.4);
  z-index: -1;
  position: absolute;
  line-height: 1.2;
  white-space: pre-wrap;
}

https://codepen.io/franciscoaquino/pen/YzyBPYK

การสนับสนุนตัวเลือก:

https://caniuse.com/#feat=css-placeholder-shown