HTML5 textarea占位符未显示

roj*_*alo 164 forms jquery html5 textarea placeholder

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

<!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>
Run Code Online (Sandbox Code Playgroud)

Aqu*_*lle 605

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

好:

<textarea></textarea>
Run Code Online (Sandbox Code Playgroud)

坏:

<textarea>
</textarea>
Run Code Online (Sandbox Code Playgroud)

  • 伙计,这个答案非常简单,我不相信这是真的!但是我为自己测试了它,果然,textarea中的空格被认为是内容 - 阻止了占位符的显示. (55认同)
  • 如果“&lt;textarea&gt;”内有空格,则意味着文本区域不为空,因此占位符没有用处。:) (4认同)

Lea*_*per 38

删除<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 
Run Code Online (Sandbox Code Playgroud)

  • 它将空间视为一种价值. (2认同)

小智 9

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


小智 5

好吧,从技术上讲,只要开始标记的结尾“>”和结束标记的起始“<”之间没有字符,它就不必在同一行上。那就是你需要以...></textarea>下面的例子结束 :

<p><label>Comments:<br>
       <textarea id = "comments" rows = "4" cols = "36" 
            placeholder = "Enter comments here"
            class = "valid"></textarea>
    </label>
</p>
Run Code Online (Sandbox Code Playgroud)