html 禁用谷歌浏览器表单自动填充

因遇到使用datalist标签的场景，结果datalist显示的数据集和谷歌自填填充的数据合并了，不符合要求，所以在网上找了几种方法都无效，最后自己研究出一个新的解决方法，供大家参考。

使用的谷歌浏览器版本为99.0.4844.51，上面的红框为我自己填充的数据，下面的红框为谷歌浏览器自动填充的数据，两种数据合并了，会给使用者混淆的感觉，以下为页面效果：

代码为 input 标签使用 datalist 的数据集，具体如下：

<input type="text" id="data" class="form-control" autocomplete="off" list="myData"/>
<datalist id="myData"></datalist>

使用了 autocomplete="off" ，但是无效，所以只能另寻其它方法，最终研究出一个新的解决方法。

还是上面的例子，autocomplete="off" 依旧保留，为input标签添加只读属性 readonly="readonly"，如下：

<input type="text" id="data" class="form-control" autocomplete="off" readonly="readonly" list="myData"/>

 加好之后再定义一个定时任务，为 input 元素清除只读属性：

// 清除只读
    window.setTimeout(function () {
        $("#data").removeAttr("readonly");
    }, 200);

 具体执行时间自行定义，最终页面效果：

 这样就完成了禁止谷歌浏览器自动填充的问题了，虽然本示例为使用datalist的数据，不过也可以适用于纯 input 元素，虽然比较麻烦，不过还好解决了问题，希望能帮助到各位。