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

Insert line break inside placeholder attribute of a textarea?

提问by amosrivera

I have tried a few approaches but none worked. Does anyone know a the nifty trick to get around this?

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

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

UPDATE: It doesn't work in chrome. It was just the textarea width.

更新：它在 chrome 中不起作用。这只是 textarea 宽度。

See:http://jsfiddle.net/pdXRx/

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

采纳答案by Jason Gennaro

What you could do is add the text as value, which respects the line break \n.

您可以做的是将文本添加为value，它尊重换行符\n。

$('textarea').attr('value', 'This is a line \nthis should be a new line');

Then you could remove it on focusand apply it back (if empty) on blur. Something like this

然后您可以将其删除并将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);
    }    
});

Example:http://jsfiddle.net/airandfingers/pdXRx/247/

示例：http : //jsfiddle.net/airandfingers/pdXRx/247/

Not pure CSS and not cleanbut does the trick.

不是纯 CSS 也不干净，但可以解决问题。

回答by lu1s

You can insert a new line html entity 
inside the placeholder attribute:

您可以
在占位符属性中插入一个新行 html 实体：

<textarea name="foo" placeholder="hello you&#10;Second line&#10;Third line"></textarea>

<textarea name="foo" placeholder="hello you&#10;Second line&#10;Third line"></textarea>

Works on: Chrome 62, IE10, Firefox 60

适用于：Chrome 62、IE10、Firefox 60

Doesn't work on: Safari 11

不适用于：Safari 11

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

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

回答by Tieson T.

Don't think you're allowed to do that: http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

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

The relevant content (emphasis mine):

相关内容（重点是我的）：

The placeholder attribute represents a shorthint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.

占位符属性表示一个简短的提示（一个词或短语），用于在控件没有值时帮助用户输入数据。提示可以是示例值或预期格式的简要说明。如果指定，该属性的值必须不包含 U+000A LINE FEED (LF) 或 U+000D CARRIAGE RETURN (CR) 字符。

回答by Patrick

UPDATE (Jan 2016):The nice little hack might not work on all browsers anymore so I have a new solution with a tiny bit of javascript below.

更新（2016 年 1 月）：漂亮的小 hack 可能不再适用于所有浏览器，所以我有一个新的解决方案，下面有一点点 javascript。

---

---

A Nice Little Hack

一个不错的小黑客

It doesn't feel nice, but you can just put the new lines in the html. Like this:

感觉不太好，但您可以将新行放在html中。像这样：

<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
        1 Long St
        London
        Postcode
        UK"></textarea>

Notice each line is on a new line (not being wrapped) and each 'tab' indent is 4 spaces. Granted it is not a very nice method, but it seems to work:

请注意，每一行都在一个新行上（未换行），并且每个“制表符”缩进是 4 个空格。当然，这不是一个很好的方法，但它似乎有效：

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

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

• It is likely that the indent level of each line will vary depending on the width of your text area.
• It is important to have resize: none;in the css so that the size of the textarea is fixed (See jsfiddle).

• 每行的缩进级别可能会因文本区域的宽度而异。
• resize: none;在 css 中有很重要的一点，这样 textarea 的大小是固定的（参见 jsfiddle）。

AlternativelyWhen you want a new line, hit return twice (So there is a empty line between your 'new lines'. This 'empty line' created needs to have enough tabs/spaces that would equate to the width of your textarea. It doesn't seem to matter if you have far too many, you just need enough. This is so dirty though and probably not browser compliant. I wish there was an easier way!

或者，当你想要一个新行时，点击返回两次（所以你的“新行”之间有一个空行。创建的这个“空行”需要有足够的制表符/空格，相当于你的文本区域的宽度。它没有如果你有太多似乎无关紧要，你只需要足够。虽然这太脏了，可能不兼容浏览器。我希望有一个更简单的方法！

---

---

A Better Solution

更好的解决方案

Check out the 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-sizingand display: blockproperties on the textarea are important or the div behind it will not be the same size.
• Setting resize: verticaland a min-heighton 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 resizeproperty 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.**

• 此解决方案在 textarea 后面放置一个 div。
• 一些 javascript 用于更改 textarea 的背景颜色，适当地隐藏或显示占位符。
• 输入和占位符必须具有相同的字体大小，因此是两个 mixin。
• 在box-sizing与display: block上textarea的性能很重要，或者它背后的股利也不会是相同的大小。
• textarea 上的设置resize: vertical和 amin-height也很重要 - 注意占位符文本将如何包装和扩展 textarea 将保持白色背景。但是，resize在水平扩展 textarea 时，注释掉该属性会导致问题。
• 只需确保 textarea 上的最小高度足以以最小宽度覆盖整个占位符。**

HTML:

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:

Javascript：

$("textarea").on('change keyup paste', function() {
  var length = $(this).val().length;
  if (length > 0) {
    $(this).addClass('data-edits');
  } else {
    $(this).removeClass('data-edits');
  }
});

回答by Samuli Hakoniemi

How about a CSS solution: http://cssdeck.com/labs/07fwgrso

CSS 解决方案怎么样：http: //cssdeck.com/labs/07fwgrso

::-webkit-input-placeholder::before {
  content: "FIRST


0ASECOND
<textarea placeholder="Enter Choice#1 &#10;Enter Choice#2 &#10;Enter Choice#3"></textarea>
0ATHIRD";
}

::-moz-placeholder::before {
  content: "FIRST
textarea{
    width:300px;
    height:100px;

}
0ASECOND
<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>
0ATHIRD";
}

:-ms-input-placeholder::before {
  content: "FIRST
<textarea
placeholder="Line1&#x0a;&#x09;&#x09;&#x09;Line2"
cols="10"
rows="5"
style="resize:none">
</textarea>
0ASECOND##代码##0ATHIRD";
}

回答by Ali Jamal

Salaamun Alekum

萨拉蒙·阿勒库姆

##代码##

Works For Google Chrome

适用于谷歌浏览器

##代码##

I Tested This On Windows 10.0 (Build 10240) And Google Chrome Version 47.0.2526.80 m

08:43:08 AST 6 Rabi Al-Awwal, 1437 Thursday, 17 December 2015

我在 Windows 10.0 (Build 10240) 和 Google Chrome 版本 47.0.2526.80 m 上测试过

2015 年 12 月 17 日星期四 08:43:08 AST 6 Rabi Al-Awwal, 1437

Thank You

谢谢你

回答by Sundaram Seth

Add only &#10 for breaking line, no need to write any CSS or javascript.

仅添加 用于换行，无需编写任何 CSS 或 javascript。

##代码## ##代码##

回答by Benjamin Udink ten Cate

Old answer:

旧答案：

Nope, you can't do that in the placeholder attribute. You can't even html encode newlines like 
in a placeholder.

不，您不能在占位符属性中这样做。您甚至不能像
占位符那样对换行符进行 html 编码。

New answer:

新答案：

Modern browsers give you several ways to do this. See this JSFiddle:

现代浏览器为您提供了几种方法来做到这一点。看到这个JSFiddle：

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

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

回答by Benjamin Udink ten Cate

Try this:

尝试这个：

##代码##

http://jsfiddle.net/vr79B/

http://jsfiddle.net/vr79B/

回答by Jayant Rajwani

Use 
in place of /nthis will change the line.

使用
代替/n这将改变线路。