自动填充表单不适用于所有浏览器答案

【问题标题】：Autofilling form does not work on all browsers自动填充表单不适用于所有浏览器
【发布时间】：2019-10-03 12:54:50
【问题描述】：

我正在尝试为运输详细信息（例如姓名、姓氏、街道、邮政编码等）创建一个自动填充表单。我希望根据所选“配置文件”的形式自动填写 - 如果用户多次使用该网站，之前已经填写过的数据以避免重新输入数据。填写表单点击提交，然后返回订单页面时，无法自动填写。

试过了：

原始代码，没有任何更改：

<form class="f-form f-form--basket checkout">
    <div class="f-form__col">
        <div class="f-field f-field--text">
            <label class="f-field__label" >
                First name
            </label>
            <input type="text" class="f-field__control"  name="firstName" placeholder="First name*" required>
        </div>
    </div>
    <div class="f-form__col">
        <div class="f-field f-field--text">
            <label class="f-field__label">
                Last name
            </label>
            <input type="text" class="f-field__control"  name="lastName" placeholder="Last name*" required>
        </div>
    </div>
    <button class="c-btn">
        Pay!
    </button>
</form>

【问题讨论】：

我假设当您说您已经“尝试”了这些链接时，您已经更改了代码以将正确的“自动完成”HTML 参数添加到每个元素？当我对您的代码执行此操作时，它对我来说效果很好。自动完成功能在浏览器之间甚至是用户之间都非常不同 - 您是否有可能在浏览器中更改了自己的设置？最后，请记住，自动完成不会在页面加载时填充字段 - 它会“建议”在您开始输入其中一个字段之后自动完成一组值。

标签： html autofill

【解决方案1】：

您说您的目标是用“之前已经填写的数据”“自动填充”空表单。这是两个不同的想法，似乎在这里被交叉：

您链接的文档页面引用了一种称为“自动填充”的浏览器功能，即个人用户可以在自己工作站的浏览器中填写有关自己的信息（人口统计信息，如姓名和电子邮件，以及送货地址信息），然后浏览器可以帮助他们正确填写表格。

如果您尝试填写的字段是标准的人口统计字段，那么这种功能会很适合您。但是为了让用户利用它，用户可以更新他们的浏览器偏好来设置他们自己的“自动填充配置文件”（作为 HTML/JS 的 Web 开发人员，您不能这样做。

你所说的第二部分引用数据“他们已经填写”；大概你的意思是他们第一次在你的网站上填写的信息？为了让这个想法发挥作用，您需要以某种方式保存用户输入的信息。您可以将数据客户端保存在 cookie 或其他 HTML5 本地存储选项中，并在用户再次访问页面时使用 Javascript 重新填写这些值，或者如果用户有您的帐户并已登录，您可以将该数据保存在后端并生成已填充默认值的 HTML，或者构建一些其他 API 端点以通过 Javascript/AJAX 从前端获取其默认值。

【讨论】：