输入框为空显示元素、非空隐藏的实现问题求助

核心问题 #

• 你定义的变量x仅在页面加载时获取了输入框的初始值，后续输入框内容变化时，x不会自动更新，导致判断逻辑始终基于初始空值，无法正确切换元素显示状态。
• 仅监听focus事件，无法覆盖输入框内容变化的所有场景（比如用户输入文字后、删除内容后），只有当输入框获得焦点时才会触发判断，逻辑覆盖不全。

修改后的代码 #

HTML

<input id="searchBtn">
<div class="mypara">mypara</div>

CSS（补充绝对定位样式示例）

#searchBtn {
  position: relative;
  padding: 8px;
}
.mypara {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  padding: 6px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

JavaScript

// 获取元素
const searchInput = document.getElementById("searchBtn");
const myPara = document.querySelector(".mypara");

// 定义判断逻辑函数
function toggleParaVisibility() {
  const inputValue = searchInput.value.trim(); // 去除首尾空格，避免空字符干扰
  myPara.style.visibility = inputValue === "" ? "visible" : "hidden";
}

// 监听输入框的输入事件，实时响应内容变化
searchInput.addEventListener("input", toggleParaVisibility);
// 监听焦点事件，确保获得焦点时状态正确
searchInput.addEventListener("focus", toggleParaVisibility);
// 页面初始化时执行一次，设置初始状态
toggleParaVisibility();

说明 #

• 将获取输入框值的操作放到函数内部，每次触发事件时都获取最新的输入内容，保证判断逻辑基于当前值。
• 使用input事件监听输入框的实时变化，用户每输入/删除一个字符都会触发判断，确保状态及时更新。
• 增加页面初始化时的函数调用，确保页面加载完成后，元素的初始显示状态符合预期。
• 使用trim()处理输入值，避免用户输入空格导致误判（如果不需要这个逻辑，可以去掉trim()）。

内容的提问来源于stack exchange，提问作者Gildas Ckoffi