前言
近期，遇到这么个问题，大家知道浏览器的input框会自动填充浏览器的缓存数据，但是为了安全要求不允许自动填充，我一看这不好搞嘛，一顿猛操作，最后发现不好使呀，其他浏览器并不是兼容的，那么这就要考虑不同浏览器的兼容性问题了，自从微软放弃了他的大儿子IE之后，我们终于可以不用再兼容IE了，多爽，但是毕竟Chrome的市场占有率不是100%，还有其他的浏览器内核兼容性需要考虑；由于之前没有遇到过这种需求，所以查阅资料后，此文章解决了我的问题，特此记录：www.cnblogs.com/mamimi/p/91…，尊重原创，特别鸣谢！
五大主流浏览器内核
| 浏览器 | 渲染内核 |
|---|---|
| IE/Edge | Trident（<=IE10）EdgeHTML，Microsoft Edge在2019年之后改为Chromium内核 |
| Chrome | Chromium（Webkit） |
| Firefox | Gecko |
| Safari | Webkit/Webkit2 |
| Opera | Presto |
Mozilla官方建议
Mozilla官方文档建议的是 直接使用autocomplete='off' 即可禁止输入框从浏览器cache获取数据，以前使用这个也就足够兼容浏览器了。
现在发现，却在chrome、firfox上有兼容性无法解决。
解决方案
后来查阅相关资料得到以下解决方法：
1、可以设置一个默认的input用来接收浏览器的默认填充，并且设置css为dispaly:none;
形如：
<input type = 'text' style='display:none'>
这样既不会影响用户的体验，也可以兼容所有的浏览器，但经过测试却发现，在chrome上不起作用，在firefox上也只能对type != password的 输入框起作用。
2、autocomplete = 'new-password'
<input type='text' > <input type='password' autocomplete='new-password' >
使用上诉代码，在chrome上既可生效，用户名与密码都不会自动填充，但是firefox上任然会自动填充用户名
3、结合上诉两个情况
<input type='text' style='display:none'> <!-- 针对firefox -->
用户名：<input type='text' autocomplete='off'>
密码：<input type='password' autocomplete='new-password'>
既可解决针对chrome与firefox内核的浏览器自动填充输入框的问题
4、但是近期经过测试发现 这种方法还是不能解决firefox上密码框的历史输入，可以:3步骤上做这样的操作：
<input type='password' autocomplete="new-password" style="background-color: #FFFFFF!important;" readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);" />>
结语
又是码代码的一天~
做梦中... ...
