JavaScript读取自动填充输入值及jQuery输入容器状态类控制问题

一、完善输入框容器的激活状态处理 #

你已经实现了基于焦点切换类的逻辑，只需要补充页面初始化时的状态检查，就能搞定预填充输入框的场景。我们可以把状态判断逻辑抽成复用函数，让初始化、聚焦、失焦逻辑统一起来：

jQuery(document).ready(function($){ 
  var $jsInputs = $('.js-input'); 

  // 复用函数：更新输入框容器的激活状态
  function updateInputState($input) {
    var $parent = $input.parent();
    // 聚焦状态 或 输入框有非空内容时，添加激活类；否则移除
    if ($input.is(':focus') || $input.val().trim() !== '') {
      $parent.addClass('is-active');
    } else {
      $parent.removeClass('is-active');
    }
  }

  // 页面加载时，初始化所有输入框的状态
  $jsInputs.each(function() {
    updateInputState($(this));
  });

  // 聚焦事件监听
  $jsInputs.on('focusin', function(e) { 
    updateInputState($(this));
  }); 

  // 失焦事件监听
  $jsInputs.on('focusout', function(e) { 
    updateInputState($(this));
  }); 
});

这种写法的好处是逻辑集中，不管是页面刚加载、用户点击输入框还是离开输入框，都用同一个规则判断状态，避免重复代码。

二、解决浏览器自动填充值的读取问题 #

浏览器自动填充比较“特殊”，通常不会触发input、change这类常规事件，导致我们无法及时捕捉到填充的值。这里给你几个实用的解决方案：

方案1：监听浏览器特定的自动填充动画事件 #

Chrome等浏览器在自动填充时会触发animationend事件，我们可以利用这个特性：

$jsInputs.on('animationend webkitAnimationEnd', function() {
  // 检查是否是自动填充触发的动画（不同浏览器类名可能有差异，需测试）
  if ($(this).hasClass('ui-autocomplete-loading')) {
    updateInputState($(this));
  }
});

方案2：定时轮询检查值变化 #

如果上面的方案兼容性不够，短时间的定时轮询是兼容性最广的选择：

// 存储每个输入框的初始值
var inputValueMap = {};
$jsInputs.each(function() {
  var key = $(this).attr('id') || $(this).attr('name');
  inputValueMap[key] = $(this).val();
});

// 每200ms检查一次值是否变化（间隔可按需调整）
setInterval(function() {
  $jsInputs.each(function() {
    var key = $(this).attr('id') || $(this).attr('name');
    var currentVal = $(this).val();
    if (currentVal !== inputValueMap[key]) {
      inputValueMap[key] = currentVal;
      updateInputState($(this)); // 值变化时更新状态
    }
  });
}, 200);

方案3：配合具体的autocomplete属性触发事件 #

给输入框设置具体的autocomplete属性值（比如username、email，而不是简单的on/off），部分浏览器会在自动填充后触发change事件：

<input type="text" class="js-input" autocomplete="username">

然后监听change事件即可：

$jsInputs.on('change', function() {
  updateInputState($(this));
});

你可以根据自己的浏览器兼容需求选择方案，方案1和3性能更优，方案2兼容性最全面。

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