介绍
在前端开发中，我们经常需要让用户填写表单以便获取必要的信息，而文本框是表单中最常用的元素之一。但是，当用户不输入任何内容时，文本框就会变成空白的，这给用户造成了困惑。为了解决这个问题，我们可以使用HTML5中的placeholder属性来为文本框提供默认提示。
placeholder属性
placeholder属性是HTML5中新增的属性，可以在文本框为空时显示提示信息。它的语法很简单：
<input type="text" placeholder="请输入您的姓名">
上面的代码将在文本框中显示“请输入您的姓名”这个提示信息，当用户开始输入内容后，提示信息就会自动消失。
兼容性
虽然placeholder属性在大多数现代浏览器中都能够正常使用，但是在一些旧版浏览器中可能会出现兼容性问题。为了确保兼容性，我们可以通过JavaScript来实现类似的效果。
JavaScript实现
下面是一个使用纯JavaScript实现的示例：
-- -------------------- ---- -------
------ ----------- -------------
--------
--- ----- - -----------------------------------
------------------------------- ---------- -
------------- --- --- -
----------------------------------
---------- - ---------------------------------
-
---
------------------------------ ---------- -
------------- --- --------------------------------- -
-------------------------------------
---------- - ---
-
---
---------上面的代码中，我们通过addEventListener方法来添加了两个事件处理函数。第一个处理函数在文本框获得焦点时触发，如果当前文本框中没有任何值，则为文本框添加名为“placeholder”的类，并将文本框的值设置为placeholder属性的值。第二个处理函数在文本框失去焦点时触发，如果当前文本框中的值等于placeholder属性的值，则移除名为“placeholder”的类，并将文本框的值设置为空字符串。
为了实现占位符效果，我们还需要在CSS中定义名为“placeholder”的样式：
.placeholder {
color: #999;
}这样就可以让空文本框显示灰色的提示信息了。
总结
在HTML表单中，使用placeholder属性可以为文本框提供默认提示信息。对于不支持placeholder属性的旧版浏览器，我们可以使用JavaScript来实现。通过这种方式，我们可以提高用户填写表单的体验，同时也可避免用户填写错误或缺失必要信息的情况发生。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9162
