jQuery如何检测输入框是否被浏览器自动填充值

这个问题我之前也碰到过，浏览器自动填充的机制确实有点坑——它经常在DOM初始化完成后才偷偷把值填进去，导致你在页面加载时用val()拿不到，虽然页面上明明显示有内容。下面给你几个可行的解决方案：

方案1：监听input事件 + 延迟初始检查 #

这是最可靠的方法，因为不管是手动输入还是浏览器自动填充，input事件都会被触发。同时我们需要在页面加载后延迟一小段时间再检查一次，覆盖那些页面加载时就完成自动填充的场景。

// 定义复用的处理函数
function handleNameInput() {
  const $nameInput = $("#edit-name");
  if ($nameInput.val() !== "") {
    // 这里执行你的特定操作
    console.log("输入框已填充，值为：", $nameInput.val());
  }
}

// 页面初始化后执行
$(document).ready(function() {
  // 延迟100ms检查，给浏览器自动填充留足时间
  setTimeout(handleNameInput, 100);
  
  // 监听input事件，处理后续的填充（比如用户切换表单后浏览器再次填充）
  $("#edit-name").on("input", handleNameInput);
});

为什么这个方法有效？因为浏览器自动填充完成后，会触发输入框的input事件，这时候val()就能正确获取到填充的值了。延迟检查则是为了处理那些在ready事件触发前就完成填充的极端情况。

方案2：检查浏览器自动填充的特殊样式（针对Chrome等webkit内核浏览器） #

Chrome等webkit内核浏览器会给自动填充的输入框添加-webkit-autofill伪类，我们可以通过检查这个伪类来判断是否被自动填充：

$(document).ready(function() {
  setTimeout(function() {
    const nameInput = document.getElementById("edit-name");
    // 检查是否存在-webkit-autofill伪类样式
    const isAutofilled = window.getComputedStyle(nameInput, "-webkit-autofill") !== null;
    
    if (isAutofilled || nameInput.value !== "") {
      // 执行你的操作
    }
  }, 100);
});

⚠️ 注意：这个方法兼容性一般，Firefox等非webkit浏览器没有这个伪类，所以只能作为补充方案。

为什么你的原代码不生效？ #

浏览器的自动填充操作通常发生在DOMContentLoaded甚至window.onload事件之后——它是浏览器层面的行为，不会等待你的JS代码执行完成。所以你在页面加载时直接调用val()，此时浏览器还没把值同步到DOM的value属性上，自然拿不到内容，虽然页面上已经渲染出了填充的值。

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