文本区域表单中的 Html 占位符文本
Posted
技术标签:
【中文标题】文本区域表单中的 Html 占位符文本【英文标题】：Html placeholder text in a textarea form 【发布时间】：2011-06-28 15:49:55 【问题描述】：在我的一个网站上，我创建了一个表格，用于收集人员姓名、电子邮件和他们的想法的描述。
我将描述的字符限制为 500 个字符，因为我不想阅读大量内容，并且我想出了如何在用户输入他们想要的内容之前让文本出现在 textarea 中。
目前用户必须自己删除“您的想法的描述”，但我想添加占位符类，当他们点击 textarea 时，它会删除我在 textarea 中写的内容
我查看了一些网站，但不知道如何使用它，我将它放在我的代码中，但通常该类只是在我的 textarea 中显示为文本。
任何关于使用这个类的帮助将非常感谢你
这是我写的
头部标签内
<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>
正文标签内
<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>
【问题讨论】：
@jnpcl 'watermark' 术语也用于这种情况。我已经添加了标签（而不是“网站”，它不添加任何信息）。 @Nikita：当我第一次阅读问题标题时，我觉得他想要其中一个脚本，可以在将内容从网页复制到剪贴板时添加内容。无论如何，这就是watermark 对我的意义。
【参考方案1】：
html5 中有一个称为“占位符”的功能，它可以完全生成此功能，而无需您进行任何编码。
您需要做的就是在表单字段中添加placeholder 属性，如下所示：
<input type='text' name='name' placeholder='Enter your name'>
当然，遗憾的是，目前只有少数浏览器支持它，但请在 Safari 或 Chrome 中试一试，看看它的实际效果。好消息是它会在不久的将来添加到几乎所有浏览器中。
当然，您仍然需要为使用旧浏览器的用户提供服务，但您也可以在可以使用它的浏览器中使用该功能。
处理它的一个好方法是使用placeholder 属性，并且只有在浏览器不支持该功能时才回退到Javascript 解决方案。 Javascript 解决方案可以从placeholder 属性中获取文本，因此您只需在一处指定即可。
如何检测是否支持placeholder功能请参见此页面：http://diveintohtml5.ep.io/detect.html
（或者，正如该页面上所说，只需使用Modernizr）
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当然，如果您搜索 html5 placeholder fallback 或类似内容，Google 会为您提供更多信息。
希望对您有所帮助。
【讨论】：
【参考方案2】：查看http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html 我想它有你想要的。
这是一个简单的页面，上面有一个我快速整理的电子邮件字段（主要来自教程）。
<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. me@example.com" class="auto-hint" />
</form>
</body>
</html>
如果字段为空，则将标题文本放入该字段中，并在用户开始输入后将其删除。
【讨论】：
以上是关于文本区域表单中的 Html 占位符文本的主要内容，如果未能解决你的问题，请参考以下文章