您可以在<textarea>中包含多行HTML5占位符文本吗?


152

我在文本字段中有幻影文本,当您使用HTML5的占位符属性关注它们时,它们会消失:

<input type="text" name="email" placeholder="Enter email"/>

我想使用相同的机制在文本区域中使用多行占位符文本,也许是这样的:

<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>

但是那些\ns会显示在文本中并且不会引起换行符...有没有办法使用多行占位符?

更新:我要使它起作用的唯一方法是利用 jQuery Watermark插件,该插件在占位符文本中接受HTML:

$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});

IE似乎可以正确处理它。Firefox OTOH只是忽略换行符
ekkis 2013年

1
stackoverflow.com/questions/7312623/…是一个非常相似的问题,答案也很好。
Lloyd Dewolf 2014年

如果遇到此问题,并使用js设置值检查CSS white-space,以确保设置正确,例如,预包装
Cory Mawhorter,

从另一个问题出发:&#10;除了Safari之外,其他任何地方都可以使用。
Sphinxxx

Answers:


82

对于<textarea>小号规范具体概述在占位符的属性,回车+换行符必须呈现由浏览器换行符。

当元素的值为空字符串且控件未处于焦点状态时,用户代理应向用户显示此提示(例如,通过将其显示在空白的未焦点控件内部)。提示中的所有U + 000D回车U + 000A LINE FEED字符对(CRLF),以及提示中的所有其他U + 000D回车符(CR)和U + 000A LINE FEED(LF)字符渲染提示时换行。

也反映在MDN上:https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW,当我尝试使用Chrome 63.0.3239.132时,它确实按其应有的方式工作。


37
除了title属性的行为方式不同,即,它不显示幻影内容。实际上,因为文本区域是多行生物,所以占位符支持文本区域多行是非常合适的。可惜规范不允许这样做。我想这些黑客一定会做。叹息
ekkis

71

大多数(请参阅下面的详细信息)浏览器上,在javascript中编辑占位符允许使用多行占位符。就像已经说过的那样,它不符合规范,您不应该期望它将来会起作用(编辑:它确实起作用)。

本示例替换所有多行textarea的占位符。

var textAreas = document.getElementsByTagName('textarea');

Array.prototype.forEach.call(textAreas, function(elem) {
    elem.placeholder = elem.placeholder.replace(/\\n/g, '\n');
});
<textarea class="textAreaMultiline" 
          placeholder="Hello, \nThis is multiline example \n\nHave Fun"
          rows="5" cols="35"></textarea>

JsFiddle片段。

预期结果

预期结果


根据评论,似乎某些浏览器接受此黑客攻击,而其他浏览器则不接受。
这是我运行的测试结果(带有browsertshotsbrowserstack

  • 铬:> = 35.0.1916.69
  • Firefox:> = 35.0(结果因平台而异)
  • IE:> = 10
  • 基于KHTML的浏览器:4.8
  • Safari:否(经测试= Safari 8.0.6 Mac OS X 10.8)
  • Opera:否(经测试<= 15.0.1147.72)

融合了这些统计数据,这意味着它可以在大约88.7%的当前(2015年10月)使用的浏览器上运行。

更新:今天,它可以在至少94.4%的当前(2018年7月)使用的浏览器上运行。


1
这个jsfiddle示例根本不起作用……只是多行,因为textarea的大小。
sebnukem 2014年

2
有一个错字,但是我不能编辑,因为StackOverflow给我这个“编辑必须至少6个字符”的错误。你的类应该multilinemultiligne
丹尼尔·洛雷罗

@sebnukem:它适用于我测试过的大多数浏览器。而且这与文本区域的大小无关。您能否提供有关所遇到问题的更多信息?
Cyrbil

似乎无法在野生动物园中使用...-\ n消失了,但所有内容都在同一行上
Hackeron 2015年

1
@Jroonk:我可以确认。这不是由于Chrome造成的,而是由于Apple强迫任何浏览器使用其IOS的WKWebView。随后,IOS上的任何浏览器都不会正确呈现此hack WKWebView
Cyrbil '18

59

我发现如果您使用很多空格,浏览器将正确包装它。不必担心使用确切数量的空格,只需在其中扔很多,浏览器就应该正确地换行到下一行的第一个非空格字符。

<textarea name="address" placeholder="1313 Mockingbird Ln         Saginaw, MI 45100"></textarea>

2
是的,不支持跨行浏览器使用多行占位符,已经找到了最新的Safari浏览器,但IOS5绝对不支持该浏览器
Tom

7
在IE和Firefox Windows中均不适合我。它只是插入我要的空格
ekkis 2013年

Chrome 37在文本区域中显示占位符文本,而不会删除换行符。有人知道“功能”的名称是什么,以便我可以a)寻找它,b)测试它吗?
2014年

23

实际上存在一个黑客,可以在Webkit浏览器中添加多行占位符,Chrome曾经可以使用,但在较新的版本中,他们删除了它:


首先像往常一样将占位符的第一行添加到html5中

<textarea id="text1" placeholder="Line 1" rows="10"></textarea>

然后通过css添加其余的行:

#text1::-webkit-input-placeholder::after {
    display:block;
    content:"Line 2\A Line 3";
}

如果您想将台词放在一个位置,可以尝试以下方法。不利的一面是除chrome,safari,webkit-etc等其他浏览器。甚至不显示第一行:

<textarea id="text2" placeholder="." rows="10"></textarea>

然后通过css添加其余的行:

#text2::-webkit-input-placeholder{
    color:transparent;
}

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

演示小提琴

如果这样可以在Firefox上运行类似的演示,那将是非常棒的。


感谢您提供小提琴链接。它使在各种浏览器中验证行为变得容易。在IE 10和FF 12(Windows)上,两个版本均失败。可惜。Safari 6.1的工作原理:(
ekkis 2013年

我想很长一段时间以来,Chrome无法再在Chrome中运行。
MikeRockétt'17

6

如果您使用的是AngularJS,则只需使用花括号将所需的内容放在其中:这是一个小提琴。

<textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>

1
我正在使用类似的方法,但是在Safari和Firefox中不起作用
stan于

6

根据MDN

呈现提示时,占位符文本内的回车符或换行符必须视为换行符。

这意味着,如果仅跳到新行,则应正确呈现。即

<textarea placeholder="The car horn plays La Cucaracha.
You can choose your own color as long as it's black.
The GPS has the voice of Darth Vader.
"></textarea> 

应该这样渲染:

在此处输入图片说明


3

HTML5规范明确表示拒绝在占位领域的新线。Webkit的版本/ will /在占位符中出现换行符时插入新行,但是这是不正确的行为,因此不应依赖。

我想段落对于w3来说不够简短;)


1
Webkit的行为是不正确的,因为规范没有说明如果存在CR / LF,必须怎么办。
基督教徒

1
@Christian现在,它说:“用户代理应在从中删除换行符后向用户显示此提示...”。它说了关于剥离换行符的内容:“当用户代理要从字符串剥离换行符时,用户代理必须从该字符串中除去所有“ LF”(U + 000A)和“ CR”(U + 000D)字符。 ”。
理查德·特纳

这个答案不再正确。现在,该规范明确要求将占位符中的换行符呈现为换行符。
Clonkex

3

反应:

如果您使用的是React,则可以按照以下步骤操作:

placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}

2

如果您textarea的宽度是静态的,则可以结合使用不间断空格和自动文本区域换行。只需为每行替换nbsp的空格,并确保两条相邻的行不能合而为一。在实践中line length > cols/2

这不是最佳方法,但可能是唯一的跨浏览器解决方案。

<textarea class="textAreaMultiligne" 
          placeholder="Hello,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This&nbsp;is&nbsp;multiligne&nbsp;example Have&nbsp;Fun&nbsp;&nbsp;&nbsp;&nbsp;"
          rows="5" cols="35"></textarea>


1

您可以尝试使用CSS,它对我有用。此属性placeholder=" "是必需的。

<textarea id="myID" placeholder=" "></textarea>
<style>
#myID::-webkit-input-placeholder::before {
    content: "1st line...\A2nd line...\A3rd line...";
}
</style>

1

在PHP中具有功能chr(13):

echo '<textarea class="form-control" rows="5" style="width:100%;" name="responsable" placeholder="NOM prénom du responsable légal'.chr(13).'Adresse'.chr(13).'CP VILLE'.chr(13).'Téléphone'.chr(13).'Adresse de messagerie" id="responsable"></textarea>';

0

我认为单独使用html / css不可能。可能会使用JavaScript或其他一些技巧-多余的空格将文本推到下一行,等等。


0

Bootstrap +内容可编辑+多行占位符

演示:https : //jsfiddle.net/39mptojs/4/

基于@cyrbil和@daniel的答案

使用Bootstrap,jQuery和https://github.com/gr2m/bootstrap-expandable-input启用内容可编辑的占位符。

使用“占位符替换” javascript并将css添加“空白:pre”,将显示多行占位符。

HTML:

<div class="form-group">
    <label for="exampleContenteditable">Example contenteditable</label>
    <div id="exampleContenteditable" contenteditable="true" placeholder="test\nmultiple line\nhere\n\nTested on Windows in Chrome 41, Firefox 36, IE 11, Safari 5.1.7 ...\nCredits StackOveflow: .placeholder.replace() trick, white-space:pre" class="form-control">
    </div>
</div>

Javascript:

$(document).ready(function() {
    $('div[contenteditable="true"]').each(function() {
        var s=$(this).attr('placeholder');
        if (s) {
            var s1=s.replace(/\\n/g, String.fromCharCode(10));
            $(this).attr('placeholder',s1);
        }
    });
});

CSS:

.form-control[contenteditable="true"] {
    border:1px solid rgb(238, 238, 238);
    padding:3px 3px 3px 3px;
    white-space: pre !important;
    height:auto !important;
    min-height:38px;
}
.form-control[contenteditable="true"]:focus {
    border-color:#66afe9;
}

-1

原始帖子中的水印解决方案效果很好。谢谢你 万一有人需要,这里有一个角度指令。

(function () {
  'use strict';

  angular.module('app')
    .directive('placeholder', function () {
      return {
        restrict: 'A',
        link:     function (scope, element, attributes) {
          if (element.prop('nodeName') === 'TEXTAREA') {
            var placeholderText = attributes.placeholder.trim();

            if (placeholderText.length) {
              // support for both '\n' symbol and an actual newline in the placeholder element
              var placeholderLines = Array.prototype.concat
                .apply([], placeholderText.split('\n').map(line => line.split('\\n')))
                .map(line => line.trim());

              if (placeholderLines.length > 1) {
                element.watermark(placeholderLines.join('<br>\n'));
              }
            }
          }
        }
      };
    });
}());
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.