我尝试了一些方法,但没有一个奏效。有人知道绕过这个的妙招吗?

<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。它只是textarea的宽度。

参见:http://jsfiddle.net/pdXRx/


当前回答

非常简单的

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

值表示原始字符串

其他回答

旧的回答:

不,你不能在占位符属性中这样做。你甚至不能用html编码像&#13;&#10;在占位符中。

新回答:

现代浏览器为您提供了几种方法。请看这个JSFiddle:

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

但需要注意的是,问题的前提与W3规范不一致,因此不能保证行为,解决方案使用&x10;工作时<textarea>是要在HTML中定义:

<textarea 
  placeholder="HTML entity works &#10; but unicode entity hard-coded \u000A !">
</textarea>

但是如果<textarea>是用JavaScript创建的,那么&#10;实体将在输出中硬编码。然而,使用unicode等效的\u000A是可以的:

let myArea = document.createElement("textarea");
myArea.placeholder = "Unicode works \u000A But HTML entity hard-coded &#10; !";

你可以插入一个新的行html实体&#10;在占位符属性内部:

< textarea name = " foo " placeholder =“你好you& 10;第二个line& #第三线" > < / textarea > 10;

适用于: Chrome 62, IE10, Firefox 60

不起作用: Safari 11

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

如果你在ASP中使用Razor。NET项目,你可以做下面的事情,这对很长的占位符值很有帮助:

@{ 
    string strPlaceholder = "Shipment Id to Update, Container Id to Update, New Tracking Number \r\n"
        + "Shipment Id to Update, Container Id to Update, New Tracking Number \r\n"
        + "Shipment Id to Update, Container Id to Update, New Tracking Number \r\n"
        + "\r\n"
        + "i.e. to update all containers with shipment Id 5803407, etner like this: \r\n"
        + "5803407, , 1Z20579A0322337062 \r\n"
        + "\r\n"
        + "or to update a specific container Id, enter like this: \r\n"
        + "5803407, 112546247, 1Z20579A0322337062 \r\n"
        ;
}
<textarea type="text" class="form-control" style="height:650px;" id="ShipmentList" name="ShipmentList" 
            placeholder="@strPlaceholder" required></textarea>

更新(2016年1月):这个漂亮的小黑客可能不再适用于所有浏览器,所以我有一个新的解决方案,下面有一小部分javascript。


一个不错的小技巧

这感觉不太好,但你可以把新行放到html中。是这样的:

<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House " 朗街1号 伦敦 邮政编码 英国" > < / >文本区域

注意,每一行都在新行上(没有被换行),每个“制表符”缩进是4个空格。虽然这不是一个很好的方法,但它似乎是有效的:

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

每行的缩进程度可能会根据文本区域的宽度而变化。 重要的是设置resize: none;在css中,这样文本区域的大小是固定的(参见jsfiddle)。

另外 当你想要一个新的行,点击返回两次(所以在你的“新行”之间有一个空行。这个“空行”创建需要有足够的制表符/空格,将等同于你的文本区域的宽度。如果你有太多似乎并不重要,你只需要足够。这太脏了,可能不兼容浏览器。我希望有更简单的方法!


更好的解决方案

查看JSFiddle。

This solution positions a div behind the textarea. Some javascript is used to change the background colour of the textarea, hiding or revealing the placeholder appropriately. The inputs and placeholders must have the same font sizes, hence the two mixins. The box-sizing and display: block properties on the textarea are important or the div behind it will not be the same size. Setting resize: vertical and a min-height on the textarea are also important - notice how the placeholder text will wrap and expanding the textarea will keep the white background. However, commenting out the resize property will cause issues when expanding the textarea horizontally. Just make sure the min-height on the textarea is enough to cover your entire placeholder at its smallest width.**

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