JavaScript实现搜索框获焦消失、失焦显示默认文字

实现原理与目标

标准的 HTML5 <input> 标签提供了 placeholder 属性用于显示提示文字，但在某些复杂交互或旧版浏览器兼容需求中，开发者可能需要自定义这一行为。本方案通过原生 JavaScript 脚本模拟该效果：用户点击输入框（获焦）时，若存在默认提示值则将其清除并高亮；当用户点击外部区域（失焦）且输入框为空时，重新填入提示文字并恢复默认样式。

第1步：构建 HTML 结构

首先创建一个包含 <input> 元素的 HTML 页面。为该输入框设置一个唯一的 ID（如 text），并通过 value 属性预填充作为提示的文字。同时引入一段内部或外部的 <script> 区块用于绑定事件。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>输入框交互示例</title>
</head>
<body>
<input id="text" type="text" value="点我就消失" />
<script>
// 后续 JavaScript 代码将放置于此
</script>
</body>
</html>

第2步：获取元素与状态初始化

在脚本中，使用 document.getElementById 获取输入框DOM对象。定义一个布尔变量 onoff 用于标记初始状态，确保仅在第一次点击时执行清空操作（避免重复清空已修改的值）。同时可预设初始文字颜色，例如黑色 #000。

var oText = document.getElementById("text");
var onoff = true;
oText.color = "#000";

第3步：处理获焦（Focus）事件

为输入框绑定 onfocus 事件。当用户点击输入框获得焦点时，检查 onoff 标志。若为 true（即初始状态），则：

1. 将 this.value 设为空字符串，隐藏提示文字。
2. 修改文字颜色（如设为红色 red）以提示用户当前处于编辑状态。
3. 将 onoff 设为 false，防止后续无意义的事件触发。

oText.onfocus = function() {
    if (onoff) {
        this.value = "";
        this.color = "red";
        onoff = false;
    }
}

第4步：处理失焦（Blur）事件

绑定 onblur 事件。当鼠标移开输入框时，判断输入框内是否仍为空。如果用户未输入任何内容：(this.value == '')，则：

1. 将文字颜色恢复为默认色（如 #000）。
2. 将 this.value 重置为原始提示文字（如 "点我就消失"）。
3. 将 onoff 重置为 true，以便下一次点击再次触发清空逻辑。

注意：若用户已经输入了新内容，则保持现状不清空，尊重用户的输入数据。

oText.onblur = function() {
    if (this.value == '') {
        this.color = "#000";
        this.value = "点我就消失";
        onoff = true;
    }
}

完成判断与测试

保存上述代码为 HTML 文件并在浏览器中打开。执行以下验证步骤：

• 初始状态：输入框显示“点我就消失”，文字为黑色。
• 点击输入框：文字立即消失，变为白色背景下的红色（或无字），光标闪烁。
• 直接失焦（未输入）：鼠标点击页面其他位置，输入框恢复显示“点我就消失”，颜色变黑。
• 输入后失焦：若先输入内容再失焦，原有文字保留，不会被重置。

简要总结

通过组合 onfocus 和 onblur 事件，配合状态变量控制，可以灵活定制输入框的交互反馈。这种方法虽不如现代 CSS ::placeholder 简洁，但在需要动态改变样式或行为逻辑的场景下依然具有实用价值。

以上就是JavaScript实现搜索框点击文字消失失焦时文本出现的详细内容，更多关于JavaScript input交互的资料请关注本站其它相关文章！