Chrome自动填充部分失效

Question

我在表单中有名字、姓氏、电子邮件、城市、州、国家和邮政编码。

同样的 Angular 代码已经部署在生产、阶段、开发和本地环境。

我在同一个 Chrome 浏览器中访问所有这些 URL。自动填充在本地和生产环境中工作得很好，但是在 Dev 和 Stage 中只会填充名字和姓氏，必须手动选择电子邮件以便填写其余信息。

而且，它的工作方式很奇怪。

在 Stage 中，只有选择名字时才填充名字，在选择姓氏时填充除名字以外的所有字段。

在 Dev 中，选择名字后会填充名字和姓氏，在选择电子邮件后会填充除名字和姓氏以外的所有字段。

需要检查一下是否有问题吗？

检查元素的 HTML 代码...

<form id="signup-form" novalidate="" name="myinfoForm" class="ng-pristine ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength ng-valid-email" style="">
        <div id="form-template-myinfo">
            <div class="panel">
                <div class="panel-body">
                    <div ng-include="" src="'/app/components/personal/info.html'" class="" style=""><div id="myinfo" on-rendered="info1Variation">
    <div class="info_container">
        <div class="well well-lg invisible-box col-sm-12 col-md-8 col-lg-8" ng-class="singlePageApp.isEnabled?'col-md-12 col-lg-12':'col-md-8 col-lg-8'">
            <text-input ng-if="!multifieldEnabled" input-field-classes="text-ellipsis" class="input-field" type="text" name="firstName" belongs-to="" min-length="2" max-length="40" placeholder="First Name" validation="regExpression.name" model="firstName" require="true" focus="true" input-id="firstName" messages="errorMessages.firstNameRedesign" field="First Name (Primary)" sub-directive="valid-name-chars"><div class="field-container strip-sides-paddings" ng-class="fieldWidth">
    <div class="text-input">
        <div class="wrapper" id="wrapper_firstName">
            <li>
                <label for="field_firstName" ng-class="fieldLabel" class="hide-label" style="">First Name</label>
                <input type="text" placeholder="First Name" name="firstName" id="field_firstName" ng-model="model" ng-focus=“onFocus()" ng-blur=“onBlur()" valid-name-chars="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]" minlength="2" maxlength="40" ng-required="true" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength text-ellipsis ng-touched is-invalid" required="required" style="">
                <span ng-if="fieldClass == 'is-valid' || fieldClass == 'is-invalid' || fieldClass == 'is-invalid-touched'" class="text-input-validation" style="">
                    <img ng-if="fieldClass == 'is-invalid' || fieldClass == 'is-invalid-touched'" src="/images/is-invalid.png">                </span>
            </li>
           <div ng-if="fieldClass == 'is-invalid' || fieldClass == 'is-invalid-touched'" ng-messages="myForm[name].$error" class="ng-active" style="">
                <div ng-repeat="errorMessage in messages">
                    <div class="ll_error" field="First Name (Primary)" ng-message-exp="errorMessage.type"></div>
                </div><div ng-repeat="errorMessage in messages">

                </div><div ng-repeat="errorMessage in messages">

                </div>
                </div>
            </div>
        </div>
     </div>
</div>
</text-input>
     <text-input ng-if="!multifieldEnabled" input-field-classes="text-ellipsis" class="input-field" type="text" belongs-to="" name="lastName" min-length="2" max-length="40" placeholder="Last Name" validation="regExpression.name" model="lastName" require="true" messages="errorMessages.lastNameRedesign" field="Last Name (Primary)" sub-directive="valid-name-chars"><div class="field-container strip-sides-paddings" ng-class="fieldWidth">
    <div class="text-input">
        <div class="wrapper" id="wrapper_lastName">
            <li>
                <label for="field_lastName" ng-class="fieldLabel" class="hide-label" style="">Last Name</label>
                <input type="text" placeholder="Last Name" name="lastName" id="field_lastName" ng-model="model"  ng-focus=“onFocus()" ng-blur=“onBlur()" valid-name-chars="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]" minlength="2" maxlength="40" ng-required="true" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength is-empty text-ellipsis" required="required" style="">

            </li>
        </div>
     </div>
</div>
</text-input>


     <text-input ng-if="formFieldCtrl.yi1.showFieldEmail" input-field-classes="text-ellipsis" class="input-field" belongs-to="" type="email" name="emailAddress" placeholder="Email Address" sub-directive="email-field-validation::no-spaces" input-id="inputEmail" validation="regExpression.email" model="emailAddress" require="true" start-validation-func="startEmailValidation()" end-validation-func="endEmailValidation()" messages="errorMessages.emailErrorMessagesRedesign" field="E-mail (Primary)"><div class="field-container strip-sides-paddings" ng-class="fieldWidth">
    <div class="text-input">
        <div class="wrapper" id="wrapper_emailAddress">
            <li>
                <label for="field_emailAddress" ng-class="fieldLabel" class="hide-label" style="">Email Address</label>
                <input type="email" placeholder="Email Address" name="emailAddress" id="field_emailAddress" ng-model="model"  ng-focus=“onFocus()" ng-blur=“onBlur()" email-field-validation="" no-spaces="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]" minlength="" maxlength="" ng-required="true" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength is-empty text-ellipsis ng-valid-email" required="required" style="">

            </li>
        </div>
     </div>
</div>
</text-input>

                <div ng-if="formFieldCtrl.yi1.showFieldAddress &amp;&amp; !singlePageApp.isEnabled">
                <text-input ng-if="!isAutoAddressYourInfo" input-field-classes="text-ellipsis" class="input-field" type="text" belongs-to="" name="street1" placeholder="Address 1" validation="regExpression.address" model="street1" min-length="2" require="true" messages="errorMessages.street1Redesign" parent-model="primaryMember" field="Street 1 (Primary)"><div class="field-container strip-sides-paddings" ng-class="fieldWidth">
    <div class="text-input">
        <div class="wrapper" id="wrapper_street1">
            <li>
                <label for="field_street1" ng-class="fieldLabel" class="hide-label" style="">Address 1</label>
                <input type="text" placeholder="Address 1" name="street1" id="field_street1" ng-model="model" ng-focus=“onFocus()" ng-blur=“onBlur()" nested-directive="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]"  ng-required="true" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength is-empty text-ellipsis" required="required" style="">

            </li>
            <!-- ngIf: fieldClass == 'is-invalid' || fieldClass == 'is-invalid-touched' -->
        </div>
     </div>
</div>
</text-input>
                <text-input input-field-classes="text-ellipsis" class="input-field" type="text" belongs-to="" name="street2" placeholder="Apt, Suite, Bldg - Optional" validation="regExpression.address2" model="street2" messages="errorMessages.street2Redesign" field="Street 2 (Optional)"><div class="field-container strip-sides-paddings" ng-class="fieldWidth">
    <div class="text-input">
        <div class="wrapper" id="wrapper_street2">
            <li>
                <label for="field_street2" ng-class="fieldLabel" class="hide-label" style="">Apt, Suite, Bldg - Optional</label>
                <input type="text" placeholder="Apt, Suite, Bldg - Optional" name="street2" id="field_street2" ng-model="model"  ng-focus=“onFocus()" ng-blur=“onBlur()" nested-directive="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]"  ng-required="" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-untouched ng-valid ng-empty ng-valid-pattern ng-valid-minlength ng-valid-maxlength is-empty text-ellipsis ng-valid-required" style="">
                           </li>
        </div>
     </div>
</div>
</text-input>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <text-input class="input-field" input-field-classes="text-ellipsis" type="text" belongs-to="" name="city" placeholder="City" min-length="2" max-length="25" validation="regExpression.city" model="city" require="true" messages="errorMessages.cityRedesign" sub-directive="only-letters" field="City (Primary)"><div class="field-container strip-sides-paddings" ng-class="fieldWidth">
    <div class="text-input">
        <div class="wrapper" id="wrapper_city">
            <li>
                <label for="field_city" ng-class="fieldLabel" class="hide-label" style="">City</label>
                <input type="text" placeholder="City" name="city" id="field_city" ng-model="model"  ng-focus=“onFocus()" ng-blur=“onBlur()" only-letters="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]" ng-required="true" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength is-empty text-ellipsis" required="required" style="">

            </li>
        </div>
     </div>
</div>
</text-input>
                    </div>
                    <div id="state-col" class="col-xs-6 col-sm-6 col-md-3 col-lg-3 strip-left-pad">
                        <text-input class="input-field" type="text" belongs-to="" name="states" placeholder="State" max-length="2" validation="regExpression.states" sub-directive="to-uppercase::only-letters" model="stateCode" require="true" messages="errorMessages.stateRedesign" field="State (Primary)"><div class="field-container strip-sides-paddings" ng-class="fieldWidth">
    <div class="text-input">
        <div class="wrapper" id="wrapper_states">
            <li>
                <label for="field_states" ng-class="fieldLabel" class="hide-label" style="">State</label>
                <input type="text" placeholder="State" name="states" id="field_states" ng-model="model"  ng-focus=“onFocus()" ng-blur=“onBlur()" to-uppercase="" only-letters="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]"  ng-required="true" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-untouched ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength is-empty" required="required" style="">

            </li>
        </div>
     </div>
</div>
</text-input>
                    </div>
                    <div id="zip-col" class="col-xs-6 col-sm-6 col-md-3 col-lg-3 strip-left-pad">
                        <text-input class="input-field" type="tel" name="postalCode" belongs-to="" placeholder="Zip Code" min-length="5" max-length="5" validation="regExpression.zip" model="postalCode" require="true" messages="errorMessages.postalCodeRedesign" sub-directive="only-number" field="Postal Code (Primary)"><div class="field-container strip-sides-paddings" ng-class="fieldWidth">
    <div class="text-input">
        <div class="wrapper" id="wrapper_postalCode">
            <li>
                <label for="field_postalCode" ng-class="fieldLabel" class="hide-label" style="">Zip Code</label>
                <input type="tel" placeholder="Zip Code" name="postalCode" id="field_postalCode" ng-model="model"  ng-focus=“onFocus()" ng-blur=“onBlur()" only-number="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]"  ng-required="true" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength is-empty" required="required" style="">

            </li>
        </div>
     </div>
</div>
</text-input>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div></div>
                </div>
            </div>
            <div class="panel-footer">
                <div class="row">
                    <button type="submit" ng-click="saveDetails()” role="button">Save
                    </button>
                </div>
            </div>
        </div>
    </form>

Thanks

- Udaya Vani

---

那是一段时间以前，我相信那是错误的标记。 - Adrian

我已经添加了我的标记。 - Udaya Vani

检查您已经存储的数据，看看它是否被存储。在Chrome中，转到“设置”>“高级”>“自动填充设置”，您将找到所有表单自动填充内容。只需确保它们存在即可。如果存在，请尝试使用DOM上的autofill属性，并使用条目的键（autofill="lastName"（我想是这样））。 - Adrian

我已经验证过了，它在那里。它在本地和生产环境下工作，但在同一款Chrome浏览器的stage和dev环境下无法工作。 - Udaya Vani

让我们在聊天中继续这个讨论。 - Adrian

Answer 1

请在您的输入标签中添加以下属性：

autocomplete="name"
autocomplete="email"
autocomplete="tel" 

在你的HTML代码中，可以使用等等…。

请参考此文档获取更多详细信息：

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

此文档将帮助你解决问题。

- Pankaj Rupapara