219

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

<!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>
4

9 回答 9

792

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

好的：

<textarea></textarea>

坏的：

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

于 2012-12-27T00:34:58.943 回答
56

<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
于 2014-04-09T12:17:22.293 回答
11

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

于 2012-07-05T21:44:25.250 回答
5

好吧，从技术上讲，只要在开始标记的结尾“>”和结束标记的开头“<”之间没有字符，它就不必在同一行。...></textarea>那就是您需要以以下示例结尾 ：

<p><label>Comments:<br>
       <textarea id = "comments" rows = "4" cols = "36" 
            placeholder = "Enter comments here"
            class = "valid"></textarea>
    </label>
</p>
于 2015-06-12T19:03:38.153 回答
4

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

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

将 twig 用于 php 框架 symfony 的示例：

<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

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

于 2019-02-13T08:29:43.900 回答
2

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

于 2015-05-27T14:52:08.633 回答
0

在我们的案例中，开始和结束标记之间的 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>
于 2017-09-25T13:30:15.453 回答
0

我有同样的问题，只使用一个.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
于 2017-11-18T14:43:14.363 回答
-4

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

上面 textarea 元素的输出

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

于 2020-07-09T02:14:27.503 回答