Web开发 阻止浏览器自动填充输入框（autofill），比较简单的方法

项目中遇到一个困扰，在编辑用户信息时，页面上有几个输入框input，有 type=text，也有type=password， 这时候浏览器因为之前记录了登录的用户名密码，这时自动填充到了输入框中，干扰了用户的操作。

那么怎样阻止浏览器自动填充密码呢？

网上绕了一大圈，很多文章里要么方法无效，要么看上去很复杂，实际没有找到比较好的办法，翻看了几个知名网站的修改密码的页面代码，都挺复杂，没看懂。 

根据之前的web开发中的经验，虽然这个是浏览器层面的功能，可能无法直接去动它，但应该有一些旁门左道可以绕过这个问题。

经过大半天的探索，找到了方法，步骤如下：

1. 把两个输入框，设置相同的id，这样，在初始化的时候，浏览器就会有一个关于控件id重复的错误提示，同时也就中断了后续的自动填充的动作：

2. 既然id重复了，那么就不直接用id取输入框了。在输入框的外面，包一层div，给div设不同的id，直接取div然后再取它里面的输入框：

<div class="form-group" id="divPwdOld">
     <label>原密码:</label>
     <input type="password" class="form-control" id="tbxPwd" > <!--id重复-->
</div>
		  	  
<div class="form-group" id="divPwdNew">
      <label>新密码:</label>
      <input type="password" class="form-control" id="tbxPwd"> <!--id重复-->
</div>

var pwdNew = $("#divPwdNew").children("input").val();
var pwdNew2 = $("#divPwdNew2").children("input").val();

效果：

问题解决。