如何检测输入框已填写文本并移除其父元素的is-empty类？

首先，咱们来拆解你代码里的几个问题，然后给出修复方案：

问题分析 #

1. 选择器错误：你的选择器是.form-control-login input，这意味着你在找带有form-control-login类的元素下的<input>子元素，但从你的HTML结构来看，大概率是<input>本身就带有form-control-login类，所以这个选择器会找不到目标元素，导致事件绑定失败。
2. 逻辑判断颠倒：你当前的代码是当输入框没有值的时候移除is-empty类，但你的需求是输入框已填写文本时移除这个类，条件写反了。
3. 未处理空白字符：如果用户输入的是空格，val()会返回非空字符串，但实际上这不算有效填写，所以需要用trim()去除首尾空白后再判断。

修复后的代码 #

jQuery部分 #

// 绑定blur事件到目标输入框
$('.form-control-login').blur(function() {
  // 获取输入框的值并去除首尾空白
  const hasContent = $(this).val().trim() !== '';
  // 根据是否有内容，移除或添加is-empty类
  if (hasContent) {
    $(this).parent('.form-group').removeClass('is-empty');
  } else {
    // 可选：如果输入框清空了，重新加上is-empty类
    $(this).parent('.form-group').addClass('is-empty');
  }
});

补充完整的HTML结构（确保输入框在目标父元素内） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group label-floating is-empty">
  <label class="control-label">Your Email</label>
  <input type="email" class="form-control-login" placeholder="Enter your email">
</div>

额外优化建议 #

• 可以同时绑定input事件，这样用户在输入过程中就能实时更新类，而不是只有失去焦点时才触发：

$('.form-control-login').on('blur input', function() {
  const hasContent = $(this).val().trim() !== '';
  $(this).parent('.form-group').toggleClass('is-empty', !hasContent);
});

这里用toggleClass的第二个参数，当!hasContent为true时添加类，false时移除，代码更简洁。

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