Laravel Blade创建用户表单Chrome自动填充问题求助

以下是几个经过验证的有效方案，针对你遇到的Chrome强制填充已登录用户信息的问题：

方案1：使用Chrome识别的"新用户"专属autocomplete值 #

Chrome现在会忽略autocomplete="off"，但对针对新用户字段的特定值会生效。给你的输入框设置对应属性：

<div class="form-group row  {{ $errors->has('email') ? 'is-invalid' : '' }}">
    <label class="col-12 col-form-label" for="email">Email</label>
    <div class="col-12">
        <input type="email" id="email" name="email" class="form-control" autocomplete="new-email">
        {!! $errors->first('email', '<div class="invalid-feedback">:message</div>') !!}
        <div class="form-text text-muted" style="font-size: 12px; font-style: italic">Obligatoire pour la convention</div>
    </div>
</div>

如果是姓名类字段，可使用autocomplete="given-name new-firstname"这类专属值，明确告诉Chrome这是新用户的信息字段，而非登录用的账号字段。

方案2：添加隐藏的假输入框"欺骗"Chrome #

在表单最顶部添加两个隐藏的输入框，模拟登录用的账号密码字段，让Chrome优先填充到这些不可见的框里：

<form>
    <!-- 隐藏的假输入框 -->
    <input type="text" name="fake-username" style="display:none !important;">
    <input type="password" name="fake-password" style="display:none !important;">

    <!-- 你的真实表单内容 -->
    <div class="form-group row  {{ $errors->has('email') ? 'is-invalid' : '' }}">
        ...
    </div>
</form>

注意要设置display:none !important，确保Chrome能识别该字段但用户完全不可见。

方案3：动态设置输入框的name属性 #

页面加载完成后，再给输入框设置真实的name属性，让Chrome初始化时无法匹配到对应的字段：

<div class="form-group row  {{ $errors->has('email') ? 'is-invalid' : '' }}">
    <label class="col-12 col-form-label" for="email">Email</label>
    <div class="col-12">
        <input type="email" id="email" name="temp-email" class="form-control">
        {!! $errors->first('email', '<div class="invalid-feedback">:message</div>') !!}
        <div class="form-text text-muted" style="font-size: 12px; font-style: italic">Obligatoire pour la convention</div>
    </div>
</div>

<script>
// 页面加载完成后替换name属性
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('email').setAttribute('name', 'email');
});
</script>

Laravel的表单验证依然能正常工作，因为最终提交的name属性是正确的。

方案4：临时修改输入框type #

先将输入框type设为Chrome不会自动填充的类型（比如search），在用户点击输入框时再改回真实类型：

<input type="search" id="email" name="email" class="form-control" onfocus="this.type='email'">

这个方法简单易实现，适合快速测试，兼容性也较好。

内容的提问来源于stack exchange，提问作者Sylvain Attoumani