HTML5文本区域占位符不出现

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

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

当前回答

我知道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

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

2019-02-13 08:29:43

其他回答

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

2012-07-05 21:44:25

在我们的例子中，在开始和结束标签之间的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-25 13:30:15

我也遇到了同样的问题，只是使用了.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

2017-11-18 14:43:14

我知道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

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

2019-02-13 08:29:43

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

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

2015-06-12 19:03:38

HTML5文本区域占位符不出现

推荐文章

最新文章

标签