阻止瀏覽器自動填充表單

在開發中涉及交易密碼驗證，但瀏覽器會自動填充表單。很天然的想到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>

總結：防止瀏覽器自動填充，原理就是讓瀏覽器自動填充數據到額外無關的表單控件上。