在文本区域的占位符属性内插入换行符?

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

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

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

相关内容(重点我):

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

2011-09-05 20:54:47

旧的回答:

不，你不能在占位符属性中这样做。你甚至不能用html编码像
在占位符中。

新回答:

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

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

2011-09-05 21:18:16

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

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

然后你可以在焦点上删除它，然后在模糊上应用它(如果为空)。就像这样

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，不干净，但做到了。

2011-09-05 22:47:45

你不能用纯HTML做到这一点，但这个jQuery插件可以让你:https://github.com/bradjasper/jQuery-Placeholder-Newlines

2012-09-13 15:56:00

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

2012-11-05 11:18:55

稍微改进了Jason Gennaro的回答(见代码注释):

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);
$('textarea').focus(function(){
    if($(this).val() == placeholder){
        // reset the value only if it equals the initial one    
        $(this).attr('value', '');
    }
});
$('textarea').blur(function(){
    if($(this).val() == ''){
        $(this).attr('value', placeholder);
    }    
});
// remove the focus, if it is on by default
$('textarea').blur();

2013-08-06 07:21:36

我喜欢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>

2013-12-10 19:48:51

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

2014-01-31 16:33:23

试试这个:

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

http://jsfiddle.net/vr79B/

2014-03-23 09:57:28

我把@Richard Bronosky的小提琴改装成这样。

使用data-*属性而不是自定义属性是更好的方法。我将<textarea placeholdernl>替换为<textarea data-placeholder>和其他一些风格。

编辑这里是理查德的原始答案，其中包含完整的代码片段。

2014-07-23 07:08:23

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

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

适用于: Chrome 62, IE10, Firefox 60

不起作用: Safari 11

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

2014-09-29 18:18:25

非常简单的

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

值表示原始字符串

2015-04-15 07:48:19

使用自定义占位符检查此解决方案。

您将获得在所有浏览器(包括Firefox)中都可用的多行占位符这是可以自定义占位符，因为你想要

演示小提琴。

$(document).on('input', '#textArea', function () { if ($('#textArea').val()) { $('#placeholderDiv').hide(); } else { $('#placeholderDiv').show(); } }); #textAreaWrap { position: relative; background-color: white; } #textArea { position: relative; z-index: 1; width: 350px; height: 100px; min-height: 100px; padding: 6px 12px; resize: vertical; background-color: transparent; /* When set background-color: transparent - Firefox displays unpleasant textarea border. Set border style to fix it.*/ border: 1px solid #a5a5a5; } #placeholderDiv { position: absolute; top: 0; padding: 6px 13px; color: #a5a5a5; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="textAreaWrap"> <textarea id="textArea"></textarea>  <div id="placeholderDiv">Multiline textarea<br> placeholder<br> <br> that works in Firefox</div> </div>

2015-10-15 22:22:29

萨拉蒙·阿莱库姆

&#10;

适用于谷歌Chrome浏览器

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

我在Windows 10.0 (Build 10240)和谷歌Chrome版本上测试了这个 47.0.2526.80米 2015年12月17日星期四，1437，拉比奥瓦尔，AST 6 08:43:08

谢谢你！

2015-11-26 12:26:07

我不喜欢隐藏占位符当你聚焦文本区域。所以我做了一个构造函数占位符，看起来完全像内置占位符，也工作在其他浏览器比谷歌Chrome。它非常方便，因为你可以随时使用占位符函数，甚至不需要jQuery。

编辑:

它现在还能正确处理特殊情况，比如插入占位符。

2016-02-27 12:38:36

HTML

<textarea data-placeholder="1111\n2222"></textarea>

$('textarea[data-placeholder]').each(function(){
    var $this = $(this),
        placeholder = $this.data('placeholder'),
        placeholderSplit = placeholder.split('\\n');
    placeholder = placeholderSplit.join('\n');
    $this.focus(function(){
        var $this = $(this);
        if($this.val() === placeholder){
            $this.val('');
            // $this.removeClass('placeholder');
        }
    }).blur(function(){
        var $this = $(this);
        if($this.val() == '') {
            $this.val(placeholder);
            // $this.addClass('placeholder');
        }
    }).trigger('blur');
});

2016-08-08 10:04:04

使用& # 10;在\n的地方，这将改变这一行。

2016-11-02 07:21:18

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

将它设置为预行，为我解决了这个问题。

textarea { 空白:pre-line; ｝ <textarea placeholder='这是一行这应该是一个新的行'></textarea>

2019-03-11 22:16:41

只添加&#10用于断行，不需要编写任何CSS或javascript。

textarea { 宽度:300 px; 身高:100 px; ｝ <textarea占位符='这是一行这&#10应该是一个新行'></textarea> <textarea placeholder='这是一行这应该是一条新线吗?" > < / >文本区域

2019-08-13 13:58:00

这个问题可以通过使用占位符显示的选择器和超级强加的背景来解决，如果你的实现允许:

textarea:not(:placeholder-shown) {
  background: #fff;
}

div {
  top: 0;
  left: 14px;
  color: rgba(0,0,0,0.4);
  z-index: -1;
  position: absolute;
  line-height: 1.2;
  white-space: pre-wrap;
}

https://codepen.io/franciscoaquino/pen/YzyBPYK

选择器支持:

https://caniuse.com/#feat=css-placeholder-shown

2020-05-21 05:52:34

根据我所看到的三种不同技巧的组合，这似乎在我测试过的所有浏览器中都有效。

HTML:

<textarea placeholder="Line One&#10;Line Two&#10;&#10;Line Four"></textarea>

JS在HTML文件底部:

<script>
    
    var textAreas = document.getElementsByTagName('textarea');

    Array.prototype.forEach.call(textAreas, function(elem) {
        elem.placeholder = elem.placeholder.replace(/\u000A/g, 
        '                                                     \
                                                              \
                                                              \
        \n\u2063');
    });

</script>

注意，额外的空间将导致一个干净的环绕，但必须有足够的空间，它将填补文本区域的宽度，我放置了足够的空间，它足以为我的项目，但你可以通过观察文本区域来生成它们。宽度和计算适当的基数。

2020-09-08 01:48:12

如果你在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>

2021-06-23 21:31:02

我来这里是为了一个多行占位符解决方案，然后我意识到接受的解决方案不工作时，文本区域是在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}
/>

源

2021-09-27 06:49:22

在php工作良好反斜杠+ r (\r):

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

2022-09-20 08:26:52

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

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

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

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

2022-09-30 12:42:28

在文本区域的占位符属性内插入换行符?

推荐文章

最新文章

标签