文本区域表单中的 Html 占位符文本

Question

在我的一个网站上，我创建了一个表格，用于收集人员姓名、电子邮件和他们的想法描述。

我将描述的字符限制在 500 个字符以内，因为我不想读太多，而且我想出了如何在用户输入他们想要的内容之前让文本出现在文本区域中。

目前用户必须自己删除“你的想法的描述”，但我想添加占位符类，当他们点击文本区域时，它会删除我在文本区域中写的内容

我浏览了几个网站，但不知道如何使用它，我将它放在我的代码中，但通常该类只是在我的文本区域内显示为文本。

任何有关使用此类的帮助都将非常感谢

这是我写的

在头部标签内

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

在 body 标签内

<form name="form1" method="post" action="ideas.php"> 
Your Name: &nbsp;<input type="text" name="name"><br>
Your Email: &nbsp;<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>

Answer 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 会为您提供更多负载。

希望对您有所帮助。