屏蔽 Chrome 的自动填充

2017.01.03 22:34 Tue| 280 visits 问题&解决方案| Text

问题

使用极路由上 ShadowsockR 插件的人越来越多,随之而来的问题反馈也越来越多,最普遍的问题:Chrome 浏览器会错误的将路由器的登陆密码自动填充到服务器配置的密码框中,从而引起插件异常,虽然在 FAQ 中写明请认真核对服务器的配置是否正确,并强调请务必关闭自动填充密码功能。每次询问我这类问题时都很无奈,就像中国人不看说明书一样,FAQ 阅而不读如同摆设。为了从根本上解决问题,下一版本将从插件上屏蔽 Chrome 的自动填充功能。

解决方法

<td class="td_right"><input class="form-input" data-input="true" name="ss_password" placeholder="服务器的密码" type="password" readonly onfocus="this.removeAttribute('readonly');"/></td>

思路

给 input 标签加上 readonly 属性,在用户点击密码框后,解除 readonly 属性,从而达到屏蔽 Chrome 的自动填充的目的。

其他实现思路

  1. 在正常的 input 标签前放一个 1px 的占位 input 标签,Chrome 会优先填充占位 input 标签,从而达到屏蔽的目的。
    缺点:界面会存留一个 1px 的小点,影响美观。

  2. 类似与本文使用的办法,只是用 disable 代替 readonly 属性。
    缺点:会给用户 input 无法输入的错觉。

  3. 标准的 autocomplete 属性。
    缺点:无需多想,肯定不够用。

尾巴

似乎从根本上解决了问题和烦恼,但真的解决了嘛?真正问题到底是什么呢?