jquery - HTML5 textarea 占位符未出现

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

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

最佳答案

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

好:

<textarea></textarea>

不好:

<textarea>
</textarea>

更新(2020 年)

这是not true不再,根据 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 结束行,你可能仍然会遇到麻烦。

https://stackoverflow.com/questions/10186913/

相关文章:

html - 删除vim中HTML标签之间的文本?

javascript - 在 HTML5 中使用目标 ="_blank"可以吗?

javascript - 加载网页时如何自动将焦点设置到文本框?

jquery - Bootstrap 抛出 Uncaught Error : Bootstrap's

html - 响应方 block 网格

html - 100% 最小高度 CSS 布局

html - 为什么 z-index 不起作用?

html - 在文本区域的占位符属性内插入换行符?

php - 在我的 PHP 代码中解析错误 : Syntax error, 文件意外结束

jquery - 使用 jQuery 获取所选选项的索引