因遇到使用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 元素,虽然比较麻烦,不过还好解决了问题,希望能帮助到各位。