在文本区域的占位符属性中插入换行符？

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

更新：在谷歌浏览器中无法工作，这只是文本区域宽度的问题。

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

- amosrivera

---

如果使用PHP，您可以将<?="\n"?>作为新行。 - rybo111

在占位符属性中添加
，例如<textarea placeholder="这是一行&#10;这是另一行"></textarea>。答案在下方。 - lu1s

@lu1s 这在Chrome和IE中有效，但在Firefox和Safari中无效。 - mb21

@mb21 我刚刚在 Firefox 60.0.2 中测试过，现在它可以工作了。也许现在大多数浏览器都可以工作了。 - tsuma534

2020年了，Safari 还是没有解决方案吗？ - Ömer An

Answer 1

你可以在占位符属性中插入一个新行的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/

- lu1s

---

这正是原问题所要求的。为什么它没有被投票得更高？它在每个浏览器中都不起作用吗？ - DaveAlger

@DaveAlger - 的确如此。我在Firefox中尝试了一下，它会直接打印出 
 ，而不是产生空格字符。详见 https://developer.mozilla.org/en/HTML/HTML5/Forms_in_HTML5#The_placeholder_attribute - Merlyn Morgan-Graham

在Firefox的新版本中运行非常良好。 - ii iml0sto1

适用于 Firefox 60。 - Rob Porter

@thdoan 也许你可以尝试使用另一个HTML特殊实体来进行换行：
 - lu1s

Answer 2

更新（2016年1月）：这个好用的小技巧可能不再适用于所有浏览器，因此我有一个新的解决方案，在下面加了一点点JavaScript。

---

一个不错的小技巧

虽然不太好看，但是你可以直接在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/

• 根据文本区域的宽度，每行的缩进级别可能会有所不同。
• 在CSS中加入resize: none;非常重要，这样文本区域的大小就是固定的（请参见jsfiddle）。

或者，当你想要一个新行时，请按两次回车键（因此在“新行”之间有一个空行）。这个创建出来的“空行”需要有足够的制表符/空格来对应文本区域的宽度。如果你有太多了，似乎也没有关系，只需要足够即可。但这样做很不规范，可能不兼容浏览器。我希望有一种更简单的方法！

---

更好的解决方案

查看JSFiddle。

• 此解决方案将一个div放置在文本区域后面。
• 使用一些javascript来改变文本区域的背景颜色，适当地隐藏或显示占位符。
• 输入和占位符必须具有相同的字体大小，因此有两个mixin。
• 文本区域上的box-sizing和display: block属性很重要，否则它后面的div将不是相同的大小。
• 设置resize: vertical和文本区域上的min-height也很重要 - 注意占位符文本将换行，扩展文本区域将保持白色背景。然而，注释掉resize属性会导致在水平扩展文本区域时出现问题。
• 只需确保文本区域上的最小高度足以覆盖其最小宽度下的整个占位符即可。**

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

- Patrick

---

一个非常可爱的黑客技巧。这在Chrome中绝对有效。我们能确认它在所有其他主要浏览器中的功能都是一样的吗？ - Mark Amery

我希望有人能在IE中测试它。我可以确认它在最新版本的Safari和Chrome上运行良好，但绝对不适用于Firefox。现在我使用文本代替占位符，并有一个CSS类来使文本看起来像占位符。然后是一个小的jQuery函数，在焦点时清除文本 - 或者如果为空则将其放回！ - Patrick

在Chrome和IE 11中运行良好。但在Firefox和Android默认浏览器中无法正常工作。 - Chemical Programmer

不支持Safari，Firefox和Opera。只能在Chrome中使用 :( - Omar Wagih

这应该是被接受的答案，因为当前的答案可能会提交表单中的“占位符”值。注意：在“A Better Solution”下的解决方案可以在各种浏览器上正确工作。评论中提到不同的必须是指“一个不错的小技巧”。 - Roy Prins

Answer 3

不要认为你可以这样做：http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

相关内容（重点标注为我）：

  

占位符属性表示一个短提示（单词或短语），旨在帮助用户在控件没有值时进行数据输入。提示可以是示例值或预期格式的简要描述。 如果指定了该属性，则必须具有不包含U + 000A换行符（LF）或U + 000D回车符（CR）字符的值。

- Tieson T.

---

@amosrivera 嗯。好吧，供应商可以按照他们认为合适的方式解释规范。 - Tieson T.

我是一个工具，它看起来像一条线断开了，但实际上只是占位符围绕文本区域的宽度换行。 - amosrivera

答案是正确的，但我认为“必须不包含”LR或CR的规则完全没有意义。请问这个规则的确切论据是什么？ - Jens A. Koch

@Jens-AndréKoch 我认为这个论点是占位符应该简单；如果值足够复杂需要换行，它应该作为兄弟元素存在，类似于您在此评论编辑器中激活“显示帮助”链接时看到的内容。毕竟，一旦输入包含内容，占位符就不可见了... - Tieson T.

我想删除我的那个旧答案，但它偶尔会给我免费积分。然而，你的答案才是正确的。 - lu1s

Answer 4

你可以将文本添加为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，也不是很“干净”，但能达到效果。

- Jason Gennaro

---

我可以使用JavaScript模拟占位符效果，但我希望有更简单的方法。 - amosrivera

很遗憾，@amosrivera，似乎没有标准的方法：https://developer.mozilla.org/en/HTML/HTML5/Forms_in_HTML5#The_placeholder_attribute，除了使用脚本解决。 - Jason Gennaro

不错的解决方案，但我会在focus处理程序中添加if ($(this).val() == 'This is...')，否则如果您添加了一些文本，然后失去焦点，再次单击文本区域，您的文本将消失。 - Dennis Golomazov

@DenisGolomazov 很好的补充; 我刚刚提交了一个编辑，其中包含焦点处理程序中的检查。我还建议添加一个占位符类并以不同样式进行样式设置，就像我修改后的 jsfiddle 示例更新所示: http://jsfiddle.net/airandfingers/pdXRx/249/ - Aaron

如果用户输入与占位文本完全匹配，那么它不也会被清除吗？ - nraina

Answer 5

和平 be upon you




适用于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 上进行了测试。

阿拉伯标准时间 1437 年 6 Rabi Al-Awwal 第 17 天，2015 年 12 月 17 日星期四，08:43:08。

谢谢。

- Ali Jamal

Answer 6

如何考虑使用 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";
}

- Samuli Hakoniemi

---

此解决方案在Firefox中不起作用（已在22.0-28.0b9上进行测试）。 - Hartwig

@Hartwig 我也注意到了同样的问题。由于某种原因，Firefox 无法正确处理此问题。实际上，在 IE 上也无法工作 ==> 不幸的是，它只适用于 WebKit。 - Samuli Hakoniemi

Answer 7

旧答案：

不行，在占位符属性中你不能这样做。你甚至不能在占位符中使用html编码的换行符，比如
。

新答案：

现代浏览器提供了几种方法来实现此功能。请参见这个 JSFiddle 示例：

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

- Ben

---

有用的小工具！方案2 在Safari上真正奏效。 - sandinmyjoints

Answer 8

使用 
 替代 \n 可以换行。

- Jayant Rajwani

Answer 9

只需添加&#10换行符，无需编写任何CSS或JavaScript。

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>

- Seth

Answer 10

试试这个：

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

http://jsfiddle.net/vr79B/

- user3087089

---

这只是在第一句话后面加上一些空格，不能用于更多的列或灵活的宽度。 - Jeffrey Neo