阻止浏览器自动填充表单

在开发中涉及交易密码验证，但浏览器会自动填充表单。很天然的想到autocomplete属性。

HTML5 <form> autocomplete属性

<form autocomplete="off">
...
</form>

HTML5 <input> autocomplete属性

<input type="password" autocomplete="off">

以上两种方式在某些浏览器无效！好比：Chrome 54.0.2840.71

为了解决问题，因而网上搜索，有如下方案：

1. 表单每项输入框前加入以下代码：

<input style="display: none;">

2. 经过JS设置值

经测试，方案1至少在个人浏览器上无效；方案2是不有点麻烦

 

后面考虑到方案1之因此无效，多是input不在渲染树中，浏览器自动填充时，忽略了它，因而就有了以下兼容方案，经测试有效。

<form autocomplete="off">
    <!-- @hack 阻止浏览器自动填充 -->
    <div style="width: 0;height: 0;">
        <input type="text">
        <input type="password">
    </div>

    ...
</form>

总结：防止浏览器自动填充，原理就是让浏览器自动填充数据到额外无关的表单控件上。