在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.这只是textarea的宽度.

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

Answer 1

您可以
在占位符属性中插入新的行html实体:

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

适用于:Chrome 62,IE10

不起作用:Firefox 57,Safari 11

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

Answer 2

您可以做的是将文本添加为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而不干净但是诀窍.

Answer 3

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

相关内容(强调我的):

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

Answer 4

更新(2016年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.

• 这个解决方案在textarea后面设置一个div.
• 一些javascript用于更改textarea的背景颜色,适当地隐藏或显示占位符.
• 输入和占位符必须具有相同的字体大小,因此两个mixins.
• 在box-sizing与display: block上textarea的性能很重要,或者它背后的股利也不会是相同的大小.
• 设置resize: vertical和使用min-heighttextarea也很重要 - 注意占位符文本将如何包装和扩展textarea将保持白色背景.但是,resize在水平扩展textarea时,注释掉该属性会导致问题.
• 只需确保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');
  }
});

Answer 5

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";
}

Answer 6

Salaamun Alekum




适用于谷歌浏览器

<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上测试了这个

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

谢谢

Answer 7

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

Answer 8

仅添加 用于换行，无需编写任何 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>

Answer 9

不,你不能在占位符属性中这样做.甚至html都不能像
占位符一样编码换行符.

一个小演示:

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

Answer 10

你不能用纯HTML做,但这个jQuery插件会让你:https://github.com/bradjasper/jQuery-Placeholder-Newlines

Answer 11

我喜欢 Jason Gennaro 和 Denis Golomazov 的作品，但我想要一些对全球更有用的东西。我修改了这个概念，以便可以将其添加到任何页面而不会产生任何影响。

http://jsfiddle.net/pdXRx/297/

<h1>Demo: 5 different textarea placeholder behaviors from a single JS</h1>

<h2>Modified behaviors</h2>

<!-- To get simulated placeholder with New Lines behavior,
     add the placeholdernl attribute -->

<textarea placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address' placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<h2>Standard behaviors</h2>

<textarea placeholder='Address'>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address'></textarea>

JavaScript 非常简单

<script>
(function($){
var handleFocus = function(){
    var $this = $(this);
    if($this.val() === $this.attr('placeholdernl')){
        $this.attr('value', '');
        $this.css('color', '');
    }
};

var handleBlur = function(){
    var $this = $(this);
    if($this.val() == ''){
        $this.attr('value', $this.attr('placeholdernl'))
        $this.css('color', 'gray');
    }    
};

$('textarea[placeholdernl]').each(function(){
    var $this = $(this),
        value = $this.attr('value'),
        placeholder = $this.attr('placeholder');
    $this.attr('placeholdernl', value ? value : placeholder);
    $this.attr('value', '');
    $this.focus(handleFocus).blur(handleBlur).trigger('blur');
});
})(jQuery);
</script>

Answer 12

试试这个:

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

http://jsfiddle.net/vr79B/

Answer 13

Textarea 尊重占位符的空白属性。https://www.w3schools.com/cssref/pr_text_white-space.asp

将其设置为预行解决了我的问题。

textarea {
  white-space: pre-line;
}

<textarea placeholder='This is a line     
should this be a new line'></textarea>

Answer 14

我来这里是为了一个多行占位符解决方案，然后我意识到当 textarea 位于 formik 表单内时，接受的解决方案不起作用。

在这种情况下，解决方案是模板文字。它允许您指定多行文本字符串。

    <textarea
        cols={40}
        placeholder={`day 1: Temple visit,&#13;&#10;
        day 2: Jungle barbeque,\n
        day 3: Waterfall visit in the evening,\n
        day 4: Visit UNESCO World Heritage Site,\n
        day 5: Art gallery show,\n
        day 6: Visit grand swimming pool,\n
        day 7: Visit to Blue fort`}
        rows={20}
/>

来源