我不知道我的标记出了什么问题,但是文本区域的占位符不会出现。它似乎可以用一些空白和制表符来掩盖。当您将焦点放在文本区域并从光标放置的位置删除,然后离开文本区域时,合适的占位符就会出现。

<!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,标签后面有一个空格。在我删除空间后,它开始工作


这一点一直困扰着我和很多人。简而言之,<textarea>元素的开始和结束标记必须在同一行上,否则换行符将占用它。占位符因此不会显示,因为输入区域包含内容(从技术上讲,换行符是有效的内容)。

好:

<textarea></textarea>

Bad:

<textarea>
</textarea>

更新(2020)

根据HTML5解析规范,这不再是正确的:

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结束行,您可能仍然会遇到麻烦。


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

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


从技术上讲,它不必在同一行上,只要开始标记的结尾“>”和结束标记的开头“<”之间没有字符。这就是你的结尾 ...></textarea>,示例如下:

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

在我们的例子中,在开始和结束标签之间的textarea标签不应该是空格或换行符或任何文本(值)。

如果有空格,换行符或任何文本,它被认为是覆盖占位符的值。

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

我也遇到了同样的问题,只是使用了.pug文件(类似于.jade)。我意识到这也是一个空格问题,在我的右括号后面。在我的例子中,你需要高亮后面的文本(占位符="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

我知道Aquarelle已经(很好地)回答了这篇文章,但为了防止有人对其他没有文本的标签形式(如输入)有这个问题,我将在这里留下这个:

如果您在表单中有一个输入,但由于开头的空白而没有显示占位符,这可能是由于您的“value”属性造成的。如果您使用变量来填充输入值,请检查逗号和变量之间是否有空格。

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 

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