HTML5 textarea占位符未出现

182

我无法弄清楚我的标记出了什么问题，但是文本区域的占位符不会出现。好像它可能被一些空白和制表符遮盖了。当您将焦点放在文本区域并从光标所在的位置删除时，请离开文本区域，然后会出现适当的占位符。

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

— 罗霍法洛
source

2

似乎可以正常工作：jsfiddle.net/3BzBk ...不要将脚本放在体外:)

— Marco Johannesen

2

您正在使用哪个浏览器？并非所有浏览器都支持占位符属性

— Xharze 2012年

您始终可以使用onfocus和onblur事件来获得相同的效果。另外，您可以使用以下功能测试浏览器是否支持占位符：function placeholderIsSupported（）{test = document.createElement（'input'）; 返回（测试中的“占位符”）；}

— gentrobot '04年

1

@MarcoJohannesen谢谢！我尚不能确切地说出有什么不同，但现在可以使用。

— rojobuffalo 2012年

1

@ user1338065超级。是因为它被放置在体外还是？

— Marco Johannesen

664

这一直是我和其他许多人的陷阱。简而言之，<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结束行，您可能仍然会遇到麻烦。

— 水彩画
source

66

伙计，这个答案太简单了，我不相信这是真的！但是我自己进行了测试，可以肯定的是，文本区域内的空白被视为内容，从而防止了占位符的显示。

— Eric L.

如果插件已编辑，则可以使用jQuery的.trim方法解决此问题。

— SpYk3HH 2013年

一个示例是，简单地向JS添加一个片段（在插件调用之前或之后，没关系），如下所示：$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

— SpYk3HH 2013年

另外，在加载DOM之后创建新的textarea元素时，请确保包含结束标记/>而不是>。示例：$('body').html('<textarea placeholder="test" />');

— 退化

如果里面有空格，<textarea>则表示文本区域不为空，因此，占位符没有用。:)

— Edu Ruiz

42

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

— 首席开发人员
source

空间杀死了它？奇怪的。

— AndrewLeonardi

2

它将空间视为价值。

— 首席开发人员

9

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

— 马修
source

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

— DOK 2012年

5

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

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

— 康妮
source

3

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

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

— SpicyTacos23
source

2

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

— 然而
source

4

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

— 所有工人都很重要

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>

— Yergalem
source

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

— 陵墓
source