jQuery条件判断问题：输入框内容>0或获焦时显示文本失效

嘿，我来帮你排查下密码框"SHOW"文本不按预期显示的问题～你的代码主要有两个核心问题：

1. 语法错误：条件判断的逻辑写法错误 #

你在if语句里用了逗号,, 这不是JavaScript里的逻辑或运算符，正确的逻辑或应该用||，而且你还多写了一个闭合括号，导致语法直接出错，浏览器根本无法正确解析这段判断逻辑。

2. 事件监听不完整：未监听焦点变化事件 #

你只给输入框绑定了input事件，但输入框的获焦/失焦状态变化（比如用户点击输入框但还没输入内容）并不会触发input事件，所以需要额外监听focus和blur事件，才能捕获到焦点状态的变化。

修正后的完整代码 #

HTML #

<label for="password">Password</label>
<input type="password" id="password">
<span class="show">SHOW</span>

CSS #

.show { 
  font-size: 14px; 
  display: none; 
  transition: all 0.2s ease; 
}

jQuery #

// 封装一个统一处理显示/隐藏的函数
function toggleShowText($input) {
  const hasContent = $input.val().length > 0;
  const isFocused = $input.is(":focus");
  // 满足任一条件就显示，否则隐藏
  if (hasContent || isFocused) {
    $input.siblings('.show').fadeIn();
  } else {
    $input.siblings('.show').fadeOut();
  }
}

// 绑定需要监听的事件
$('#password').on('input focus', function() {
  toggleShowText($(this));
}).on('blur', function() {
  // 失焦时单独判断：只有内容为空才隐藏
  if ($(this).val().length === 0) {
    $(this).siblings('.show').fadeOut();
  }
});

代码说明 #

• 把判断逻辑封装成函数toggleShowText，避免重复代码，也更易维护；
• 给输入框绑定input和focus事件，触发时统一执行显示判断；
• 监听blur事件时，只在输入框内容为空的情况下才隐藏"SHOW"文本——这样如果用户输入内容后失焦，文本依然会保持显示，符合常见的交互逻辑。

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