在textarea的占位符属性内插入换行符？

Question

我尝试了几种方法，但是都没有用。有谁知道解决这个问题的妙招？

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

更新：在chrome中不起作用。只是文本区域的宽度。

请参阅： http ：//jsfiddle.net/pdXRx/

Answer 1

不错的小技巧可能无法在所有浏览器上正常工作，因此我在下面提供了一个带有少量JavaScript的新解决方案。一个不错的小哈克感觉不太好，但是您可以将新行放入html中。像这样：<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,&nbsp; &nbsp; &nbsp; &nbsp; 1 Long St&nbsp; &nbsp; &nbsp; &nbsp; London&nbsp; &nbsp; &nbsp; &nbsp; Postcode&nbsp; &nbsp; &nbsp; &nbsp; UK"></textarea>请注意，每行都在换行符上（而不是换行符），并且每个“ tab”缩进为4个空格。当然，这不是一个很好的方法，但它似乎可以工作：http://jsfiddle.net/01taylop/HDfju/每行的缩进级别可能会根据文本区域的宽度而变化。resize: none;在css中具有重要的一点，以便固定textarea的大小（请参阅jsfiddle）。或者， 当您要换行时，请按两次回车键（因此，在“新行”之间有一条空行。创建的此“空行”需要具有足够的制表符/空格，它们等于您的textarea的宽度。如果您有太多，似乎只需要足够的东西，这似乎并不重要。尽管它是如此脏，而且可能与浏览器不兼容。我希望有一种更简单的方法！更好的解决方案查看JSFiddle。此解决方案将div放置在文本区域的后面。一些javascript用于更改文本区域的背景色，适当地隐藏或显示占位符。输入和占位符必须具有相同的字体大小，因此必须使用两个mixin。在box-sizing与display: block上textarea的性能很重要，或者它背后的股利也不会是相同的大小。在textarea上设置resize: verticala min-height也很重要-注意占位符文本将如何换行，扩展textarea将保持白色背景。但是，注释掉该resize属性会在水平扩展文本区域时引起问题。只要确保textarea上的最小高度足以以最小的宽度覆盖整个占位符即可。**HTML：<form>&nbsp; <input type='text' placeholder='First Name' />&nbsp; <input type='text' placeholder='Last Name' />&nbsp; <div class='textarea-placeholder'>&nbsp; &nbsp; <textarea></textarea>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; First Line&nbsp; &nbsp; &nbsp; <br /> Second Line&nbsp; &nbsp; &nbsp; <br /> Third Line&nbsp; &nbsp; </div>&nbsp; </div></form>SCSS：$input-padding: 4px;@mixin input-font() {&nbsp; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;&nbsp; font-size: 12px;&nbsp; font-weight: 300;&nbsp; line-height: 16px;}@mixin placeholder-style() {&nbsp; color: #999;&nbsp; @include input-font();}* {&nbsp; -webkit-box-sizing: border-box;&nbsp; -moz-box-sizing: border-box;&nbsp; box-sizing: border-box;}form {&nbsp; width: 250px;}input,textarea {&nbsp; display: block;&nbsp; width: 100%;&nbsp; padding: $input-padding;&nbsp; border: 1px solid #ccc;}input {&nbsp; margin-bottom: 10px;&nbsp; background-color: #fff;&nbsp; @include input-font();}textarea {&nbsp; min-height: 80px;&nbsp; resize: vertical;&nbsp; background-color: transparent;&nbsp; &.data-edits {&nbsp; &nbsp; background-color: #fff;&nbsp; }}.textarea-placeholder {&nbsp; position: relative;&nbsp; > div {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; z-index: -1;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; padding: $input-padding;&nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; @include placeholder-style();&nbsp; }}::-webkit-input-placeholder {&nbsp; @include placeholder-style();}:-moz-placeholder {&nbsp; @include placeholder-style();}::-moz-placeholder {&nbsp; @include placeholder-style();}:-ms-input-placeholder {&nbsp; @include placeholder-style();}Javascript：$("textarea").on('change keyup paste', function() {&nbsp; var length = $(this).val().length;&nbsp; if (length > 0) {&nbsp; &nbsp; $(this).addClass('data-edits');&nbsp; } else {&nbsp; &nbsp; $(this).removeClass('data-edits');&nbsp; }});