输入框（form标签、input标签、select标签、textarea标签）自动填充、历史记录的设置与清除 autocomplete

在我们使用input等标签的时候，也许会用到一些auto-complete的功能，让用户的体验更加完善，如根据用户输入的内容来自动判断、填充。

case1 预测问题

下例为我在百度上输入“为什么”之后，百度自动跳出的autocomplete内容，应该是最近百度用户问的最多的问题。

case2 输入历史

有时候一个输入框可能是用户之前输入过很多次的、相同的内容（如用户名、密码等基本不变的信息），这个时候，autocomplete是节省用户输入的时间，自动填充信息。
下例为bing搜索上的历史记录，也是autocomplete的use case之一。

case3 限制输入、选择输入

有时候输入框会由于其他的输入，或者某些条件让输入内容有所限制，如选择省份之后，城市的输入框的autocomplete内容需要根据用户输入（选择）的省份来进行设置。
此case有很多例子，相信大家都遇到过，在此不进行举例。

问题所在

问题来了，如果你的autocomplete功能与浏览器的input标签自带的autocomplete功能重复，就会带来下例问题:

我们可以看到，输入框的输入历史记录（实际上这个历史记录是浏览器控制），把我们的custom autocomplete日期选择器给拦住了一部分，这样的UI肯定是不符合使用习惯的，也一定程度上造成了困扰。

如何解决？

要解决这个问题，实际上很简单。只需要把HTML标签的自动输入属性给关掉就好了。因为我们的custom autocomplete实际上是用在DOM上追加元素的方法弹出的，所以把浏览器自带的autocomplete给禁用掉之后，就只剩下我们自己的内容了。

清除方法：

参照MDN自动完成属性，在我们需要清除的标签内部加上属性：autocomplete=“off”

浏览器不允许为此字段自动输入或选择一个值。 文档或应用程序可能提供其自己的自动完成功能，或者出于安全方面的考虑，要求不要自动输入该字段的值。

通过MDN文档的描述我们还能看到，实际上当今的Web开发中，自动完成功能通常是文档或者应用程序自行提供功能，而不是用粗粒的浏览器控制自动输入。
浏览器的自动输入还有另外一个安全隐患：恶意插件也许会利用autocomplete窃取用户输入历史等隐私信息。毕竟手机app都会“偷窥”用户剪切板，你说对吧？

以上为与你分享的内容，如果觉得有收获可以关注我，我会持续输出有关front-end的思考，以及内容的补充！