解决浏览器自动填充密码框的问题

今天解决了一个问题，就是万恶的浏览器自动填充密码（ps：在不恰当的地方做了 不恰当的事）

解决前的图片：

先声明一下：我使用的页面是ftl的静态页面。非html文件。

这里先不说废话，先说我搜到的3种方法（js清空值的那种方法不考虑，怕有延迟会造成先有值，然后消失的情况，不友好）：

1.把input type=”password” 改成 input type=”text” 并在后面加上 onfocus="this.type='password'"

 <input type="text" name="pw" id="pw" required onfocus="this.type='password'" class="form-control"  />

2.在用户名和密码之间加上一个隐藏的文本框：

 <input type="text" name="counts" id="counts" required class="form-control"  />
 <input type="password" style="display: none"/>
 <input type="password" name="pw" id="pw" required class="form-control" />

3.使用html5的属性：

 <input type="text" name="counts" id="counts" required class="form-control"  autocomplete="off"/>
 <input type="password" name="pw" id="pw" required  class="form-control"  autocomplete="off" />

说一下我使用各种方法的情况：

在我解决这个问题的时候，文本框里面已经加入了html5的属性，但是没什么卵用，所以第三种方法在我这里不好用。

我试的一直是网上搜索到的使用的最多的解决方法，第2种，加一个隐藏的密码框，因为有说浏览器会给第一个type为password的文本框填充。然后如果这个框中没有id和name属性的话，浏览器是不会进行填充的。使用了以后，发现不隐藏的时候，谷歌浏览器还真不填充了。但是我已设置display属性，就不好用了。而且360浏览器是会给最后一个密码框赋值，不隐藏也不管用。

不过如果一直点击进入这个页面，过几次，这个属性就又管用了，没找到原因。

第一种方法：进入页面的时候，还真的没有填充，我以为好用了，先输入上面的文本框，然后输入密码，确实没问题。但是当我先点击密码的时候，悲剧发生了，自动填充又出来了。

最后的解决方法：（划重点了）

    当我把第二个方法和第三个方法合起来用的时候，问题解决了。

 <input type="text" name="counts" id="counts" required class="form-control"  autocomplete="off">
  <input type="password" style="display: none"/>
 <input type="text" name="pw" id="pw" required onfocus="this.type='password'" class="form-control"  autocomplete="off" >

解决后的图片：

最后：  第三个方法我没去掉，有兴趣的可以试试。

美中不足，当我焦点在password，会给出下面的提示，如果鼠标移动上去，还是会填充，鼠标移开后就消失了：

 欢迎讨论。。。