如何阻止窗口调整大小时移除输入框的Active标签？

这问题我之前做表单组件的时候也踩过坑！大概率是你的标签激活逻辑只绑定了输入事件，没考虑窗口 resize 时的状态校验——毕竟有些场景下（比如响应式布局调整），框架或者自定义的 JS 可能会无意间重置标签的类，或者你的代码根本没监听 resize 事件来重新判断输入框内容。

核心思路 #

把「判断输入框内容并更新标签状态」的逻辑抽成独立函数，然后绑定到多个触发场景：页面初始化、输入内容变化、窗口大小调整，确保任何时候状态都能同步。

具体实现步骤 #

• 封装状态更新函数
  先写一个通用函数，负责检查输入框是否有内容，然后给对应标签添加/移除 active 类：

  // 替换成你的输入框和标签选择器
  const inputElement = document.getElementById('your-input');
  const labelElement = document.querySelector(`label[for="${inputElement.id}"]`);
  
  function syncLabelActiveState() {
    // 用trim避免空格误判
    const hasContent = inputElement.value.trim() !== '';
    labelElement.classList.toggle('active', hasContent);
  }
  

• 绑定必要事件
  除了输入事件，还要在页面加载和窗口 resize 时调用这个函数，另外给 resize 加个防抖避免频繁触发：

  // 页面加载时先初始化状态（解决输入框已有内容的情况）
  document.addEventListener('DOMContentLoaded', syncLabelActiveState);
  
  // 输入内容变化时更新
  inputElement.addEventListener('input', syncLabelActiveState);
  inputElement.addEventListener('change', syncLabelActiveState);
  
  // 窗口resize时更新，加防抖优化性能
  let resizeDebounceTimer;
  window.addEventListener('resize', () => {
    clearTimeout(resizeDebounceTimer);
    resizeDebounceTimer = setTimeout(syncLabelActiveState, 100);
  });
  

• 确保CSS优先级没问题
  你的现有CSS已经没问题，但可以加个过渡让样式切换更流畅：

  label {
    color: $blue;
    transition: color 0.3s ease, background-color 0.3s ease;
  }
  
  label.active {
    color: $green;
    background-color: rgba($red, 0.7);
  }
  

框架场景补充（如果用Vue/React） #

• Vue：可以在组件的 mounted 钩子绑定resize事件，用 watch 监听输入框的值，或者直接用计算属性控制标签的类名。
• React：用 useEffect 绑定resize事件，依赖输入框的state值，同时在组件挂载时执行一次状态同步。

这样不管窗口怎么调整，只要输入框有内容，标签的 active 状态就会稳稳保留啦！

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