JS实现input文本框点击清空及失去焦点恢复默认值

"js实现input文本框点击时文字消失，失去焦点" 在网页设计中，我们经常需要对用户交互进行定制，比如当用户点击输入框时，预设的文字（如“请输入姓名”）应该消失，让用户能够开始输入自己的内容。而当用户离开这个输入框（失去焦点）时，如果用户没有输入任何内容，原有的提示文字又应该重新出现。这个功能可以通过JavaScript来实现。以下是一个简单的示例，详细解释了如何使用JavaScript来完成这个任务。 首先，我们需要一个HTML结构，包含一个输入框元素，这里我们用`<input>`标签表示。我们可以设置它的`value`属性为预设的提示文字，例如"û"（无）。同时，我们可以添加`onblur`和`onclick`事件处理器，分别处理失去焦点和点击事件： ```html <input name="values" type="text" id="values" size="15" maxlength="20" value="û" style="color:#CCCCCC;"> ``` 在上面的代码中，`onblur`事件用于处理输入框失去焦点的情况，`onclick`事件则用于处理点击输入框时的行为。但是，直接在HTML中写入JavaScript代码并不符合现代Web开发的最佳实践，所以我们通常会将JavaScript代码分离到外部文件或者`<script>`标签内。 为了实现这个功能，我们可以创建两个JavaScript函数：一个用于清空输入框的值，另一个用于在失去焦点时检查并恢复提示文字。然后，我们需要通过`addEventListener`方法为输入框元素添加这两个事件监听器。由于需要兼容旧版IE浏览器，我们需要检查`addEventListener`是否存在，如果不存在，则使用`attachEvent`。 ```javascript function addListener(element, e, fn) { if (element.addEventListener) { element.addEventListener(e, fn, false); } else { element.attachEvent("on" + e, fn); } } var values = document.getElementById("values"); // 添加点击事件监听器 addListener(values, "click", function() { values.value = ""; }); // 添加失去焦点事件监听器 addListener(values, "blur", function() { if (values.value === '') { values.value = "û"; } }); ``` 这段JavaScript代码首先定义了一个通用的`addListener`函数，用于在不同浏览器上添加事件监听器。接着，它获取了ID为"values"的输入框元素，并分别为其添加了`click`和`blur`事件的监听器。点击事件的处理函数会清空输入框的值，而失去焦点事件的处理函数会在输入框为空时恢复预设的提示文字。 总结一下，通过上述的HTML和JavaScript代码，我们可以实现一个具有自定义交互行为的输入框，即点击时清除提示文字，失去焦点且无输入时恢复提示文字。这种功能可以提高用户体验，使得用户在填写表单时更加直观和便捷。