这几天遇到这样的需求。当输入框有值且鼠标悬停时，显示可清除按钮，否则不显示。要求本身没有什么特别的。项目中使用的vue2只需要检测触发挂起事件时绑定值是否不为空即可。但是当我登录页面的时候，发现页面初始加载后，输入框里好像有一个值，但是绑定的v-model值是空的。这实际上是浏览器自动填充的值（具有不同的字体大小和蓝色背景）。其实大家在开发中应该或多或少遇到过这个问题。举几个例子：我想去除自动填充的底色，如下图，浮动标签被挡住。像我遇到的这个问题，好像是值得的。我无法得到分析。我查看了一些信息并获得了有关自动填充的一些信息。不同的浏览器有不同的自动填充实现。这里我们只以chrome为例。发生自动填充时，chrome不会发送更改，包括更改事件。由于没有任何事件的事件派发，因此无法通过js捕获自动填充事件，因为自动填充是由浏览器控制的，而不是由真实用户触发的，因此这不是isTrusted行为，因为它不是受信任的行为，所以我们不能通过js读取autofill的值，直到真正的用户操作听上去有点乱，没关系，简单总结一下主要有两点：chrome在自动填充的时候不会触发任何事件，所以jscan'tcapturethevalueofautofilljs拿不到，所以检测不到autofill？漏，漏，其实答案就在眼前。解决方案我们可以看到自动填充输入框的样式发生了变化。打开F12下拉就可以看到了。如果想解决自动填充背景色的问题，可以使用这个css覆盖了这个伪类：input:-internal-autofill-selected接下来说说在js中是如何解决这个问题的。观察这里有一个特殊的css属性appearance，测试autofill的状态。appearance属性的值为menulist-button。手动输入时，appearance的值为auto。我们可以利用这个属性来实现autofill的检测，简单写一个方法：constdetectAutofill=(element)=>{returnwindow.getComputedStyle(element,null).getPropertyValue('appearance')==='menulist-button'}然后在页面初始化的时候加一个延迟调整一下。经过测试，可以调整到600ms左右，所以给个默认值600ms。constdetectAutofill=(element,timeout=600)=>{returnnewPromise(resolve=>{setTimeout(()=>{resolve(window.getComputedStyle(element,null).getPropertyValue('appearance')==='menulist-button')},timeout)})}使用示例：asynctestAutoFill(){this.autofilled=awaitdetectAutofill(this.$refs.input)}参考：https://dom.spec.whatwg.org/#...https://kishoreconnect.com/ja...https://medium.com/weekly-web...
