jQuery HTML5 textarea占位符未出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10186913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 textarea placeholder not appearing
提问by rojobuffalo
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>
回答by Aquarelle
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).
这对我和其他许多人来说一直是个难题。总之，<textarea>元素的开始和结束标记必须在同一行，否则换行符占据它。由于输入区域包含内容（换行符在技术上是有效的内容），因此不会显示占位符。
Good:
好的：
<textarea></textarea>
Bad:
坏的：
<textarea>
</textarea>
回答by Lead Developer
Delete all spaces and line breaks between <textarea>opening and closing </textarea>tags.
删除<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
回答by matthew
its because there is a space somewhere. I was using jsfiddle and there was a space after the tag. After I deleted the space it started working
因为某处有空间。我正在使用 jsfiddle，标签后面有一个空格。在我删除空间后它开始工作
回答by Conny P
Well, technically it does not have to be on the same line as long as there is no character between the ending ">" from start tag and the starting "<" from the closing tag. That is you need to end with
...></textarea>as in the example below:
好吧，从技术上讲，只要开始标记的结尾“>”和结束标记的起始“<”之间没有字符，它就不必在同一行上。那就是你需要以...></textarea>下面的例子结束
：
<p><label>Comments:<br>
<textarea id = "comments" rows = "4" cols = "36"
placeholder = "Enter comments here"
class = "valid"></textarea>
</label>
</p>
回答by SpicyTacos23
I know this post has been (very well) answered by Aquarelle but just in case somebody is having this issue with other tag forms with no text such as inputs i'll leave this here:
我知道 Aquarelle 已经（很好地）回答了这篇文章，但以防万一有人在其他没有文本（例如输入）的标签表单中遇到此问题，我会将其留在这里：
If you have an input in your form and placeholder is not showing because a white space at the beginning, this may be caused for you "value" attribute. In case you are using variables to fill the value of an input check that there are no white spaces between the commas and the variables.
如果您的表单中有一个输入并且占位符没有显示，因为开头有空格，这可能是由于您的“值”属性造成的。如果您使用变量来填充输入值，请检查逗号和变量之间是否没有空格。
example using twig for php framework symfony :
将 twig 用于 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
In this case the tag between {{ }} is the variable, just make sure you are not leaving spaces between the commas because white space is also a valid character.
在这种情况下，{{ }} 之间的标记是变量，只需确保逗号之间没有空格，因为空格也是有效字符。
回答by Yet
use <textarea></textarea>instead of leaving a space between the opening and closing tags as <textarea>
</textarea>
使用<textarea></textarea>而不是在开始和结束标签之间留一个空格作为<textarea>
</textarea>
回答by Yergalem
Between the opening and closing tag in our case textarea tag shouldn't be spaceor newline characteror any text(value).
在我们的案例 textarea 标签中的开始和结束标签之间不应该是空格或换行符或任何文本（值）。
If there's space, newline character or any text, it's considered as value which overrides placeholder.
如果有空格、换行符或任何文本，则将其视为覆盖占位符的值。
**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>
回答by maudulus
I had the same issue, only using a .pugfile (similar to .jade). I realized that it was also a space issue, following the end of my closing parentheses. In my example, you need to highlight the text after (placeholder="YOUR MESSAGE")to see:
我遇到了同样的问题，只使用了一个.pug文件（类似于.jade）。我意识到这也是一个空格问题，在我的右括号结束之后。在我的示例中，您需要突出显示之后的文本(placeholder="YOUR MESSAGE")才能看到：
BEFORE:
前：
form.form-horizontal(method='POST')
.form-group
textarea.form-control(placeholder="YOUR MESSAGE")
.form-group
button.btn.btn-primary(type='submit') SUBMIT
AFTER:
后：
form.form-horizontal(method='POST')
.form-group
textarea.form-control(placeholder="YOUR MESSAGE")
.form-group
button.btn.btn-primary(type='submit') SUBMIT
