因遇到使用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 元素，虽然比较麻烦，不过还好解决了问题，希望能帮助到各位。
原文地址:https://blog.csdn.net/qq_35353996/article/details/125393059
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_49509.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
