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

        1 Long St

        London

        Postcode

        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>

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

  }

});