当输入框值含变量但变量为空时如何显示div？

问题场景 #

当输入框值设为纯空（value=""）时，JS能正常判断并显示警告div；但输入框值绑定PHP变量<?php echo esc_attr( $user->first_name ); ?>时，若变量为空，原有JS判断无法生效，需要实现相同的空值警告效果。

原因分析 #

1. JS执行时机过早：如果JS代码在输入框元素加载前执行，document.getElementById会返回null，导致判断逻辑无法运行。
2. 潜在空白字符：PHP变量为空时，输出的value属性可能存在不可见的空白字符（比如换行、空格），导致== ""判断不成立。

解决方案 #

方案1：优化JS判断逻辑与执行时机 #

修改JS代码，确保在DOM加载完成后执行，同时使用trim()处理输入值，覆盖空白字符的情况：

<!-- 带PHP变量的输入框 -->
<input type="text" class="field-settings" name="account_first_name" id="account_first_name" 
value="<?php echo esc_attr( $user->first_name ); ?>"/>

<div id="showDiv" style="padding:10px;width:300px;height:20px;background-color:red;display:none">请输入名字</div>

<script>
// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const input = document.getElementById("account_first_name");
  const warningDiv = document.getElementById("showDiv");
  
  // 去除前后空白后判断是否为空
  if(input.value.trim() === "") {
    warningDiv.style.display = "block";
  }
});
</script>

方案2：PHP端直接控制显示（无需JS） #

如果不需要动态监听输入框变化，仅在页面加载时判断，可以直接通过PHP控制警告div的显示状态，更高效：

<input type="text" class="field-settings" name="account_first_name" id="account_first_name" 
value="<?php echo esc_attr( $user->first_name ); ?>"/>

<!-- PHP判断变量是否为空，控制div的display属性 -->
<div id="showDiv" style="padding:10px;width:300px;height:20px;background-color:red;<?php echo empty($user->first_name) ? 'display:block' : 'display:none'; ?>">请输入名字</div>

方案3：监听输入框实时变化（可选） #

如果需要在用户修改输入框内容时实时显示/隐藏警告，可以添加输入事件监听：

<input type="text" class="field-settings" name="account_first_name" id="account_first_name" 
value="<?php echo esc_attr( $user->first_name ); ?>"/>

<div id="showDiv" style="padding:10px;width:300px;height:20px;background-color:red;display:none">请输入名字</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const input = document.getElementById("account_first_name");
  const warningDiv = document.getElementById("showDiv");
  
  // 页面加载时先判断一次
  checkInputValue();
  
  // 监听输入变化实时判断
  input.addEventListener('input', checkInputValue);
  
  function checkInputValue() {
    if(input.value.trim() === "") {
      warningDiv.style.display = "block";
    } else {
      warningDiv.style.display = "none";
    }
  }
});
</script>

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