HTML5 textarea 占位符未出现答案

【问题标题】：HTML5 textarea placeholder not appearingHTML5 textarea 占位符未出现
【发布时间】：2012-04-28 12:54:24
【问题描述】：

我无法弄清楚我的标记出了什么问题，但文本区域的占位符不会出现。似乎它可能被一些空格和制表符所覆盖。当您专注于文本区域并从光标所在的位置删除，然后离开文本区域时，就会出现正确的占位符。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
    </head>

    <body>

    <form action="message.php" method="post" id="message_form">
        <fieldset>

            <input type="email" name="email" id="email" title="Email address"
                maxlength="40"
                placeholder="Email Address" 
                autocomplete="off" required />
            <br />
            <input type="text" 
                name="subject" 
                id="subject" title="Subject"
                maxlength="60" placeholder="Subject" autocomplete="off" required />
            <br />
            <textarea name="message" 
                id="message" 
                title="Message" 
                cols="30" 
                rows="5" 
                maxlength="100" 
                placeholder="Message" required>
            </textarea>
            <br />
            <input type="submit" value="Send" id="submit"/>

        </fieldset>
    </form>
</body>

<script>

$(document).ready(function() {        
    $('#message_form').html5form({
        allBrowsers : true,
        responseDiv : '#response',
        messages: 'en',
        messages: 'es',
        method : 'GET',
        colorOn :'#d2d2d2',
        colorOff :'#000'
    }
);
});

</script>

</html>

【问题讨论】：

似乎工作正常：jsfiddle.net/3BzBk ...不要将脚本放在正文之外:)
您使用的是哪个浏览器？并非所有浏览器都支持占位符属性
您总是可以使用 onfocus 和 onblur 事件来获得相同的效果。此外，您可以使用以下函数测试浏览器是否支持占位符： function placeholderIsSupported() { test = document.createElement('input');返回（测试中的“占位符”）； }
@MarcoJohannesen 谢谢！我还不能确切地说出有什么不同，但现在可以了。
@user1338065 超级。是因为放在体外还是？

标签： jquery forms html textarea placeholder

【解决方案1】：

这对我和其他许多人来说一直是一个难题。简而言之，<textarea> 元素的开始和结束标签必须在同一行，否则会被换行符占据。由于输入区域包含内容（从技术上讲，换行符是有效内容），因此不会显示占位符。

好：

<textarea></textarea>

不好：

<textarea>
</textarea>

更新（2020 年）

根据 HTML5 解析规范，这不再是 not true：

If the next token is a U+000A LINE FEED (LF) character token, 
then ignore that token and move on to the next one. (Newlines 
at the start of textarea elements are ignored as an authoring 
convenience.)

如果你的编辑坚持用 CRLF 结束行，你可能仍然会遇到麻烦。

【讨论】：

伙计，这个答案太简单了，我不相信这是真的！但我为自己测试了它，果然，文本区域内的空白被认为是内容——防止显示占位符。
如果插件被编辑了，你可以使用jQuery的.trim方法修复这个问题。
一个例子，就是简单地向 JS 添加一个片段（在插件调用之前或之后，没关系），如下所示：$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });
另外，在加载 DOM 后创建新的 textarea 元素时，请确保包含结束标记 /> 而不是 >。示例：$('body').html('<textarea placeholder="test" />');
如果<textarea> 中有空格，则表示文本区域不为空，因此，占位符没有用处。 :)

【解决方案2】：

删除<textarea>打开和关闭</textarea>标签之间的所有空格和换行符。

<textarea placeholder="YOUR TEXT"></textarea>  ///Correct one

<textarea placeholder="YOUR TEXT"> </textarea>  ///Bad one It's treats as a value so browser won't display the Placeholder value

<textarea placeholder="YOUR TEXT"> 
</textarea>  ///Bad one

【讨论】：

空间杀死它？很奇怪。
它将空间视为一个值。

【解决方案3】：

因为某处有空间。我使用的是 jsfiddle，标签后面有一个空格。删除空间后它开始工作

【讨论】：

哇！我在下一行有结束 textarea 标记，缩进 4 个空格 > 那些不可见的空格在 textarea 中，但直到我尝试使用占位符时我才意识到这一点。开始和结束 textarea 标签之间没有空格！

【解决方案4】：

好吧，从技术上讲，只要在开始标记的结尾“>”和结束标记的开始“...></textarea> 如下例所示：

<p><label>Comments:<br>
       <textarea id = "comments" rows = "4" cols = "36" 
            placeholder = "Enter comments here"
            class = "valid"></textarea>
    </label>
</p>

【讨论】：

【解决方案5】：

我知道 Aquarelle 已经（非常好）回答了这篇文章，但以防万一有人遇到其他标签表单的问题，没有输入等文本，我将把它留在这里：

如果您在表单中有输入并且占位符没有显示，因为开头有空格，这可能是您的“值”属性引起的。如果您使用变量来填充输入值，请检查逗号和变量之间是否没有空格。

在 php 框架 symfony 中使用 twig 的示例：

<input type="text" name="subject" value="{{ subject }}" placeholder="hello" />       <-- this is ok
<input type="text" name="subject" value" {{ subject }} " placeholder="hello" />      <-- this will not show placeholder

在这种情况下，{{ }} 之间的标记是变量，只要确保您没有在逗号之间留下空格，因为空格也是有效字符。

【讨论】：

【解决方案6】：

使用<textarea></textarea>，而不是在开始和结束标签之间留一个空格<textarea> </textarea>

【讨论】：

这不会增加现有答案尚未解决的任何内容。

【解决方案7】：

在我们的例子中，文本区域标签的开始和结束标签之间不应是空格或换行符或任何文本（值）。

如果有空格、换行符或任何文本，则将其视为覆盖占位符的值。

    **PlaceHolder Appears**
    <textarea placeholder="Am Default Message"></textarea>

    **PlaceHolder Doesn't Appear**

    <textarea placeholder="Am Default Message">  </textarea>
   <textarea placeholder="Am Default Message"> 
   </textarea>
   <textarea placeholder="Am Default Message">Something</textarea>

【讨论】：

【解决方案8】：

我遇到了同样的问题，只使用了.pug 文件（类似于.jade）。我意识到这也是一个空间问题，在我的右括号结束之后。在我的示例中，您需要突出显示(placeholder="YOUR MESSAGE") 之后的文本才能看到：

之前：

form.form-horizontal(method='POST')
  .form-group
    textarea.form-control(placeholder="YOUR MESSAGE") 
  .form-group  
    button.btn.btn-primary(type='submit') SUBMIT

之后：

form.form-horizontal(method='POST')
  .form-group
    textarea.form-control(placeholder="YOUR MESSAGE")
  .form-group  
    button.btn.btn-primary(type='submit') SUBMIT

【讨论】：

【解决方案9】：

那么，现在的问题是我们如何预填充 textarea 元素？ XYZ，你会得到：

主要问题是在 textarea 元素中，我们无意中用空格预填充了元素。

【讨论】：