HTML5 的 form 如何关闭自动完成功能

自动完成的功能

HTML 的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。

核心

使用 autocomplete="off"（给不想要提示的 form 或某个 input 设置为 autocomplete=off。）

很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到；

可以在 input 中加入 autocomplete=“off” 来关闭记录 系统需要保密的情况下可以使用此参数

提示：autocomplete 属性有可能在 form 元素中是开启的，而在 input 元素中是关闭的。

注意：autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

HTML form 中开启 autocomplete （一个 input 字段关闭 autocomplete ):

开启

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

关闭

<form action="demo-form.php" autocomplete="off">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

重点

虽然你设置了autocomplete="off"，但是如果用户选择了记住，Chrome 还是会在下次登录给你补全的；

解决 Chrome 记住的方式

一个解决方案，有需要的可以试一试

<input type="password" style="display:none;width:0;height:0;">
<input data-placeholder="请输入密码" name="password" data-required="true"  type="password" autocomplete="new-password" data-max-length="50" tabindex="2" spellcheck="false" id="auto-id-1505904797992" placeholder="请输入密码">

先输入一个隐藏文本域，再输入第二个展示的文本框，重点是我加黑的字体，编译器可能会无法识别，但是浏览器可以解析。

更多操作，可以参考知乎的网友回答：https://www.zhihu.com/question/23529765

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！