HTMX内联验证场景下，如何在输入框被浏览器自动填充时触发验证请求？

我之前也碰到过这个一模一样的问题！浏览器自动填充输入框的时候，HTMX完全没反应，根本不发验证请求，查了半天才搞懂：原来浏览器的自动填充机制很特殊，它填充内容时通常不会触发我们平时依赖的input或者change事件，而HTMX默认就是靠监听这些事件来发起请求的，所以才会出现这种“漏触发”的情况。

给你分享两个亲测有效的解决方法：

方法一：监听浏览器自动填充的动画事件（精准触发） #

我们可以利用浏览器给自动填充的输入框添加的样式特性，配合自定义动画来监听自动填充动作，然后手动告诉HTMX该发请求了。

先修改你的输入框代码，给它加个自定义的触发事件autofill：

<input class="form-control"
       id="phone"
       type="tel"
       hx-post="/validate"
       hx-select="#phone-number-validation"
       hx-target="#phone-number-validation"
       hx-trigger="input, autofill" />

然后加一小段CSS和JS来监听自动填充：

/* 给自动填充的输入框加个极短的动画，用来触发事件监听 */
#phone:-webkit-autofill {
  animation-name: onAutoFill;
  animation-duration: 0.1s;
}

@keyframes onAutoFill {
  from {}
  to {}
}

// 监听webkit内核浏览器（Chrome、Edge等）的自动填充动画结束事件
document.getElementById('phone').addEventListener('webkitAnimationEnd', function(e) {
  if (e.animationName === 'onAutoFill') {
    // 手动触发HTMX的autofill事件
    htmx.trigger(this, 'autofill');
  }
});

// 兼容其他支持动画事件的浏览器
document.getElementById('phone').addEventListener('animationstart', function(e) {
  if (e.animationName === 'onAutoFill') {
    htmx.trigger(this, 'autofill');
  }
});

这个方法的好处是只在自动填充时触发，不会有多余的请求，精准度很高。

方法二：定时检查输入框值变化（通用兼容） #

如果上面的动画监听在某些浏览器里不生效，那可以用个简单的“轮询检查”方案——每隔一小段时间看看输入框的值有没有变，变了就手动触发HTMX的请求：

<input class="form-control"
       id="phone"
       type="tel"
       hx-post="/validate"
       hx-select="#phone-number-validation"
       hx-target="#phone-number-validation" />

const phoneInput = document.getElementById('phone');
// 记录当前输入框的值
let lastInputValue = phoneInput.value;

// 每隔300毫秒检查一次值的变化
setInterval(() => {
  if (phoneInput.value !== lastInputValue) {
    lastInputValue = phoneInput.value;
    // 手动触发HTMX的input事件，让它发验证请求
    htmx.trigger(phoneInput, 'input');
  }
}, 300);

这个方案几乎兼容所有浏览器，缺点是有一点点性能开销，但300毫秒的间隔对页面性能影响微乎其微，完全可以忽略。

你可以根据自己的浏览器兼容需求选其中一个方法，亲测都能解决自动填充不触发验证的问题！

备注：内容来源于stack exchange，提问作者David Masters