阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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>
    
    First name:
    Last name:
    E-mail:

    关闭

    <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>
    
    First name:
    Last name:
    E-mail:

    重点

    虽然你设置了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前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

    面试题
    HTML CSS JavaScript
    jQuery Vue.js React
    算法 HTTP Babel
    BootStrap Electron Gulp
    Node.js 前端经验相关 前端综合
    Webpack 微信小程序 -

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

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录