Chrome自动填充功能无法正常工作

Question

我有名字，姓氏，电子邮件，城市，州，国家和地区;以我的形式拉链。

相同的角度代码已部署在Prod，Stage，Dev＆amp;本地

我在同一个Chrome浏览器中访问所有这些网址。自动填充功能在Local＆amp; PROD。但是，它只填充First＆amp; Dev和Stage中的姓氏，必须选择电子邮件以填补其余内容。

它也很奇怪。

在阶段，在从自动填充中选择名字时，只有第一个名称被填充，而在从自动填充中选择lastName时，所有字段（firstName除外）都会被填充。

在开发中，选择自动填充中的名字，填写名字和姓氏，然后选择自动填充中的电子邮件，所有字段（firstName和姓氏除外）都将被填充。

有什么需要检查的吗？

来自inspect element的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>

谢谢

Answer 1

请在输入标记中添加以下属性，如

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

你的HTML代码中的

等 ....

请参阅此文档了解更多详情：

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

本文档将帮助您解决问题。