Question

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

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

Answer 1

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

好：

<textarea></textarea>

为：

<textarea>
</textarea>

Answer 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

Answer 3

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

Answer 4

嗯，从技术上讲，只要在结尾＆＃34;＆gt;＆＃34;之间没有字符，它就不必在同一条线上。从开始标记和开始＆＃34;＆lt;＆＃34;从结束标记。那就是你需要结束 javap，如下例所示：

    <?php 

$numbers = array();
$i = 0;

while($i < 10){
    $new = rand();
    $known = false;
    foreach($numbers as $key => $value){
        if($value == $new ){
            $known = true;
            break;
        }
    }
    if(!$known){
        $numbers[$i]=$new;
        $i++;
    }


}

var_dump($numbers);

?>

Answer 5

使用<textarea></textarea>而不是在开始和结束标记之间留出空格<textarea> </textarea>

Answer 6

我知道Aquarelle对此帖子的回答（非常好），但以防万一有人将其他标签形式的此问题与无文字（例如输入内容）的问题联系在一起，我会在此保留：

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

使用树枝作为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

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

Answer 7

在我们的案例中，开头和结尾标签之间的textarea标签不应该是空格或换行符或任何文字（值）。

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

background

Answer 8

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

<强> BEFORE：

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

<强> AFTER：

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

Answer 9

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

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

HTML5 textarea占位符未显示

9 个答案: