设置占位符文本 - Html

在HTML中，可以使用占位符文本（placeholder text）来为用户提供输入提示。占位符文本是在输入字段中的灰色文本，例如“输入您的电子邮件地址”。

语法

占位符文本可以通过 placeholder 属性添加到输入字段（input）或文本框（textarea）中。例如：

<input type="text" placeholder="请输入您的用户名">

<textarea placeholder="请输入您的评论"></textarea>

特点

• 占位符文本通常是灰色的，和实际输入不同。
• 当用户点击输入字段时，占位符文本会消失。
• 如果输入字段有默认值，占位符文本会自动覆盖默认值。

兼容性

占位符文本在所有主要浏览器中都得到支持，包括IE10及以上版本。但是在旧版浏览器中可能会出现兼容性问题。这时可以使用JavaScript来模拟实现占位符文本。以下是一个示例代码片段：

<input type="text" onfocus="if(this.placeholder=='请输入您的用户名')this.placeholder='';" onblur="if(this.placeholder=='')this.placeholder='请输入您的用户名';" placeholder="请输入您的用户名">
<script>
  var input = document.getElementsByTagName("input")[0];
  input.placeholder = "请输入您的用户名";
  input.onfocus = function() {
    if (this.placeholder == "请输入您的用户名") this.placeholder = "";
  }
  input.onblur = function() {
    if (this.placeholder == "") this.placeholder = "请输入您的用户名";
  }
</script>

该脚本在输入字段获取焦点后自动隐藏占位符文本，当输入字段失去焦点时则自动显示占位符文本。