textarea 表单中的 Html 占位符文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5021919/
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
Html placeholder text in a textarea form
提问by GFlam
On one of my websites I have created a form that collects the persons name, email and a description of their idea.
在我的一个网站上，我创建了一个表格，用于收集人员姓名、电子邮件和他们想法的描述。
I limited the characters of the description to 500 characters as I don't want to read a ton and I figured out how to have the text appear in the textarea before the user inputs what they want.
我将描述的字符限制为 500 个字符，因为我不想阅读大量内容，并且我想出了如何在用户输入他们想要的内容之前让文本出现在 textarea 中。
Currently the user has to delete "Description of your idea" themselves but I want to add the placeholder class where it deletes what I have written in the textarea when they click the textarea
目前，用户必须自己删除“您的想法的描述”，但我想添加占位符类，当他们单击 textarea 时，它会删除我在 textarea 中写入的内容
I have looked on a few sites and couldn't figure out how to use it I placed it in my code, but usually the class just appeared as text inside my textarea.
我查看了一些网站，但不知道如何使用它，我将它放在我的代码中，但通常该类只是作为文本出现在我的 textarea 中。
Any help on using this class would be great thank you
对使用这门课的任何帮助都会非常感谢
Here is what I have written
这是我写的
Inside the head tags
在头部标签内
<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
} else {
limitCount.value = limitNum - limitField.value.length;
}
}
</script>
Inside the body tags
身体内部标签
<form name="form1" method="post" action="ideas.php">
Your Name: <input type="text" name="name"><br>
Your Email: <input type="text" name="email"<br>
<textarea name="desc" cols=50 rows=10 onKeyDown="limitText(this.form.desc,this.form.countdown,500);"
onKeyUp="limitText(this.form.desc,this.form.countdown,500);">Description of your idea</textarea><br>
<font size="1">(Maximum characters: 500)<br>
You have <input readonly type="text" name="countdown" size="3" value="500"> characters left.</font>
<br>
<input type="submit" name="Submit" value="Submit!"> </form>
回答by Spudley
There is a feature in HTML5 called 'placeholders', which produces exactly this feature without you having to do any coding at all.
HTML5 中有一个称为“占位符”的功能，它完全可以生成此功能，而您根本无需进行任何编码。
All you need to do is add a placeholderattribute to your form field, like so:
您需要做的就是placeholder向表单字段添加一个属性，如下所示：
<input type='text' name='name' placeholder='Enter your name'>
Sadly, of course, only a few browsers currently support it, but give it a go in Safari or Chrome to see it in action. The good news is that it is being added to virtually all browsers in the near future.
遗憾的是，当然，目前只有少数浏览器支持它，但请在 Safari 或 Chrome 中试一试，看看它的实际效果。好消息是，在不久的将来，它将被添加到几乎所有浏览器中。
Of course, you still need to cater for users with older browsers, but you may as well make use of the feature in browsers that can use it.
当然，你仍然需要迎合旧浏览器的用户，但你也可以在可以使用它的浏览器中使用该功能。
A good way to deal with it is to use the placeholderattribute, and only fall back to the Javascript solution if the browser doesn't support the feature. The Javascript solution can take the text from the placeholderattribute, so you only need to specify it in one place.
处理它的一个好方法是使用placeholder属性，并且只有在浏览器不支持该功能时才回退到 Javascript 解决方案。Javascript 解决方案可以从placeholder属性中获取文本，因此您只需在一处指定它。
See this page for how to detect whether the placeholderfeature is supported: http://diveintohtml5.ep.io/detect.html
有关如何检测是否placeholder支持该功能的信息，请参阅此页面：http: //diveintohtml5.ep.io/detect.html
(or, as it says on that page, just use Modernizr)
（或者，正如该页面上所说，只需使用Modernizr）
The Javascript fall-back code is fairly simple to implement. Exactly how you do it would depend on whether you want to use JQuery or not, but here are links to a few examples:
Javascript 回退代码实现起来相当简单。具体如何操作取决于您是否想使用 JQuery，但这里有几个示例的链接：
- http://www.morethannothing.co.uk/2010/01/placeholder-text-in-html5-a-js-fallback/
- http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
- http://www.morethannothing.co.uk/2010/01/placeholder-text-in-html5-a-js-fallback/
- http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
And of course Google will give you loads more if you search for html5 placeholder fallbackor something similar.
当然，如果你搜索html5 placeholder fallback或类似的东西，谷歌会给你更多的负载。
Hope that helps.
希望有帮助。
回答by kfox
Check out http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.htmlI think it has what you are looking for.
查看http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html我认为它有你要找的东西。
Here is a simple page that has an email field on it that I quickly put together (pulled mostly from the tutorial).
这是一个简单的页面，上面有一个电子邮件字段，我很快把它放在一起（主要是从教程中提取的）。
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Focus auto-focus fields
$('.auto-focus:first').focus();
// Initialize auto-hint fields
$('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
if($(this).val() == $(this).attr('title')){
$(this).val('');
$(this).removeClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
if($(this).val() == '' && $(this).attr('title') != ''){
$(this).val($(this).attr('title'));
$(this).addClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
if($(this).attr('title') == ''){ return; }
if($(this).val() == ''){ $(this).val($(this).attr('title')); }
else { $(this).removeClass('auto-hint'); }
});
});
</script>
</head>
<body>
<form>
Email: <input type="text" name="email" id="email" title="i.e. [email protected]" class="auto-hint" />
</form>
</body>
</html>
The title text is put in the field if it's empty, and removed once the user starts typing.
如果字段为空，则将标题文本放入该字段中，并在用户开始输入后将其删除。
