在我们使用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的思考,以及内容的补充!