屏蔽Chrome密码回填功能

     在我们的日常工作中，常常会有这样的需求，当我们使用Chrome浏览器（其他浏览器未测试，应该类似）去登录一个网站时，浏览器会提示我们是否保存用户名和密码信息，那么作为我们开发人员，会发现在用户修改密码的页面，浏览器会自动回填用户的密码，这与我们的期望不同，因此我们需要屏蔽浏览器在修改密码时的回填功能。

    在网上寻找此问题的解决方案，下面就将我的解决历程分享一下：

    Step1：问题呈现

  

                <li class="colFill">
                    <a>请输入当前密码</a>
                    <input type="password" id="currPassword" />
                </li>
                <li class="colFill">
                    <a>请输入新密码</a>
                    <input type="password" id="newPassword" />
                </li>
                <li class="colFill">
                    <a>请再次输入新密码</a>
                    <input type="password" id="confirmNewPass" />
                </li>

Step2：添加autocomplete="off"，问题依旧

                <li class="colFill">
                    <a>请输入当前密码</a>
                    <input type="password" id="currPassword" autocomplete="off"/>
                </li>
                <li class="colFill">
                    <a>请输入新密码</a>
                    <input type="password" id="newPassword" autocomplete="off" />
                </li>
                <li class="colFill">
                    <a>请再次输入新密码</a>
                    <input type="password" id="confirmNewPass" autocomplete="off" />
                </li>

Step3：根据博友https://blog.csdn.net/w390058785/article/details/80512591的方案，进行修改，问题依旧

                <li class="colFill">
                    <a>请输入当前密码</a>
                    <input type="password" id="currPassword" autocomplete="off"/>
                </li>
                <li class="colFill">
                    <a>请输入新密码</a>
                    <input type="text" style="display: none" />
                    <input type="text" style="display: none" />
                    <input type="password" id="newPassword" autocomplete="off" />
                </li>
                <li class="colFill">
                    <a>请再次输入新密码</a>
                    <input type="password" style="display: none" />
                    <input type="password" style="display: none" />
                    <input type="password" id="confirmNewPass" autocomplete="off" />
                </li>

Step4：对博友https://www.jb51.net/article/112452.htm的3和4方案就行测试，问题依旧，对2方案进行测试有效，为了使用Jquery对Dom元素操作，去掉id属性的同时，添加class，但是测试人员在测试的时候偶尔还会存在密码自动回填

                <li class="colFill">
                    <a>请输入当前密码</a>
                    <input type="password" class="currPassword" />
                </li>
                <li class="colFill">
                    <a>请输入新密码</a>
                    <input type="password" class="newPassword" />
                </li>
                <li class="colFill">
                    <a>请再次输入新密码</a>
                    <input type="password" class="confirmNewPass" />
                </li>

Step5：在Step4的基础上结合博友https://blog.csdn.net/weixin_38312502/article/details/87877389的<input type="password" autocomplete="new-password" style="display: none"/>彻底解决

                <li class="colFill">
                    <a>请输入当前密码</a>
                    <input type="password" class="currPassword" autocomplete="off"/>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </li>
                <li class="colFill">
                    <a>请输入新密码</a>
                    <input type="password" class="newPassword" autocomplete="off"/>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </li>
                <li class="colFill">
                    <a>请再次输入新密码</a>
                    <input type="password" class="confirmNewPass" autocomplete="off"/>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </li>

Step：感谢上面博友提供的方案