首页利用焦点事件实现用户输入文本框获得焦点时其提示文字清空，文本框失去焦点时重新显示提示文字。

利用焦点事件实现用户输入文本框获得焦点时其提示文字清空，文本框失去焦点时重新显示提示文字。

时间: 2023-06-27 16:02:32 浏览: 134

可以使用JavaScript来实现这个功能。具体步骤如下： 1. 在HTML中创建一个文本框，并且设置一个提示文字。 ```html <input type="text" id="myInput" placeholder="请输入内容"> ``` 2. 在JavaScript中获取该文本框元素。 ```javascript var inputElement = document.getElementById("myInput"); ``` 3. 添加焦点事件监听器，当文本框获得焦点时清空提示文字。 ```javascript inputElement.addEventListener("focus", function(){ inputElement.placeholder = ""; }); ``` 4. 添加失去焦点事件监听器，当文本框失去焦点时重新显示提示文字。 ```javascript inputElement.addEventListener("blur", function(){ inputElement.placeholder = "请输入内容"; }); ``` 完整的代码如下： ```html <!DOCTYPE html> <html> <head> <title>输入框焦点事件示例</title> </head> <body> <input type="text" id="myInput" placeholder="请输入内容"> <script type="text/javascript"> var inputElement = document.getElementById("myInput"); inputElement.addEventListener("focus", function(){ inputElement.placeholder = ""; }); inputElement.addEventListener("blur", function(){ inputElement.placeholder = "请输入内容"; }); </script> </body> </html> ```

阅读全文