我不喜欢隐藏占位符当你聚焦文本区域。所以我做了一个构造函数占位符，看起来完全像内置占位符，也工作在其他浏览器比谷歌Chrome。它非常方便，因为你可以随时使用占位符函数，甚至不需要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尊重占位符的空白属性。https://www.w3schools.com/cssref/pr_text_white-space.asp

将它设置为预行，为我解决了这个问题。

textarea { 空白:pre-line; ｝ <textarea placeholder='这是一行 这应该是一个新的行'></textarea>

试试这个:

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

http://jsfiddle.net/vr79B/

使用自定义占位符检查此解决方案。

您将获得在所有浏览器(包括Firefox)中都可用的多行占位符 这是可以自定义占位符，因为你想要

演示小提琴。

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

使用& # 10;在\n的地方，这将改变这一行。

我来这里是为了一个多行占位符解决方案，然后我意识到接受的解决方案不工作时，文本区域是在formik形式。

在这种情况下，解决方案就是模板字面量。它允许您指定多行文本字符串。

    <textarea
        cols={40}
        placeholder={`day 1: Temple visit,&#13;&#10;
        day 2: Jungle barbeque,\n
        day 3: Waterfall visit in the evening,\n
        day 4: Visit UNESCO World Heritage Site,\n
        day 5: Art gallery show,\n
        day 6: Visit grand swimming pool,\n
        day 7: Visit to Blue fort`}
        rows={20}
/>

源