HTML5 textarea占位符未显示 | textarea占位符未显示

本文介绍了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.phpmethod =postid =message_form> 
< fieldset> 
 
< input type =emailname =emailid =emailtitle =电子邮件地址
 maxlength =40
 placeholder =电子邮件地址
 autocomplete =offrequired /> 
< br /> 
< input type =text
 name =subject
 id =subjecttitle =Subject
 maxlength =60placeholder =Subjectautocomplete =offrequired /> 
< br /> 
< textarea name =message
 id =message
 title =Message
 cols =30
 rows =5
 maxlength =100
 placeholder =消息必需> 
< / textarea> 
< br /> 
< input type =submitvalue =Sendid =submit/> 
 
< / fieldset> 
< / form> 
< / body> 
 
< script> 
 
 $（document）.ready（function（）{
 $（'＃message_form'）。html5form（{
 allBrowsers：true，
 responseDiv：'＃响应'，
消息：'en'，
消息：'es'，
方法：'GET'，
 colorOn：'＃d2d2d2'，
 colorOff： '＃000'
} 
）; 
}）; 
 
< / script> 
 
< / html>

解决方案

其他。简而言之，< textarea> 元素的开始和结束标记必须位于同一行，否则换行符会占用它。因此，占位符将不会显示，因为输入区域包含内容（换行符是技术上有效的内容）。

好：

 < textarea>< / textarea>

不良：

 < textarea> 
< / textarea>

I cannot figure out what is wrong with my markup, but the placeholder for the text area will not appear. It seems as though it may be covered up with some blank spaces and tabs. When you focus on the text area and delete from where the cursor puts itself, then leave the text area, the proper placeholder then appears.

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

解决方案

This one has always been a gotcha for me and many others. In short, the opening and closing tags for the <textarea> element must be on the same line, otherwise a newline character occupies it. The placeholder will therefore not be displayed since the input area contains content (a newline character is, technically, valid content).

Good:

    <textarea></textarea>

Bad:

    <textarea>
    </textarea>

这篇关于HTML5 textarea占位符未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！