在前端开发中，我们经常需要创建各种HTML表单来收集用户信息。不过，在表单中输入提示文本可能会让用户感到困惑或烦恼，因此我们可以提供一种交互方式：当用户点击表单字段时，该字段中的文本将自动消失。
实现思路
这个效果可以通过JavaScript和CSS实现。我们需要给表单字段添加一个“focus”事件监听器，当用户在该字段上点击时，我们将清空该字段中的文本。
HTML代码
------ ---------------------- ------ ----------- --------- ----------- ----------------------
JavaScript代码
--- ---------- - --------------------------------
------------------------------------ ---------- -
-- ----------------- --- ----------- -
---------- - ---
-
---CSS样式
------------------ - ---------- ----- -------- ----- ------- --- ----- ----- - ------------------------ - -------- ----- -
如何使用
只需将上述HTML，JavaScript和CSS代码复制并粘贴到您的代码中即可。请注意，用于显示占位符的属性应设置为“placeholder”，而不是“value”。
结论
在HTML表单中添加文本消失效果可以增强用户体验，使用户更快地填写表单并减少输入错误。此外，这也是一个很好的JavaScript和CSS练习，可以帮助您更好地理解这两种技术如何一起工作。
示例
以下是完整的HTML示例代码：
--------- -----
------
------
-----------------------
-------
------------------ -
---------- -----
-------- -----
------- --- ----- -----
-
------------------------ -
-------- -----
-
--------
-------
------
------
------ ----------------------
------ ----------- --------- ----------- ----------------------
-------
--------
--- ---------- - --------------------------------
------------------------------------ ---------- -
-- ----------------- --- ----------- -
---------- - ---
-
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29786