使用JavaScript/jQuery判断输入框状态实现自定义占位符隐藏

修复方案 #

你原有代码存在两个核心问题：

1. 第一个方案未判断输入框内容是否为空，失焦直接显示占位符
2. 第二个方案使用change事件仅在失焦时才触发内容判断，且条件判断中误将赋值符号=当做相等判断符号==，逻辑存在语法错误

将显隐逻辑封装为公共函数，同时监听focus、blur、input三个事件，覆盖获焦、失焦、实时输入所有场景，每次触发事件时统一判断显隐条件即可：

$(document).ready(function(){
  // 封装占位符显隐判断逻辑
  function togglePlaceholder() {
    const $input = $('#search-input');
    // 条件：输入框聚焦 或 输入内容去空格后非空，满足任意一个就隐藏占位符
    const shouldHide = $input.is(':focus') || $input.val().trim() !== '';
    shouldHide ? $('#search-placeholder').fadeOut(100) : $('#search-placeholder').fadeIn(100);
  }

  // 绑定需要监听的事件
  $('#search-input').on('focus blur input', togglePlaceholder);

  // 页面加载完成后先执行一次，处理输入框有默认值的场景
  togglePlaceholder();
});

以上逻辑已经兼容移动端触摸场景，focus事件在移动端点击输入框时会正常触发，无需额外绑定触摸事件。

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