Chrome 帐单和联系信息分别触发自动填充
Chrome Autofill triggering separately for billing and contact information
计费和联系信息分别触发自动填充。
例如,当我单击以下 4 个输入填充中的任何一个时,它会为它们提供自动填充 => 名字、姓氏、phone 号码和电子邮件。当我点击以下 4 个中的任何一个时,它会同时触发它们的自动填充 => 账单地址、账单邮政编码、账单国家、账单城市。
自动填充适用于两组中的每一组,但我希望它是一个通过选择 8 个输入字段中的任何一个来自动填充的组。
代码示例(我使用 Angular 8 和 Material 设计组件,但我认为这不应该造成干扰,因为我认为这是一个 HTML 问题) :
<form method="post" id="paymentForm" [formGroup]="formGroup" (ngSubmit)="onSubmit(formGroup.value)" class="form" >
<div class="customer-info">
<div class="customer-info-personal">
<div>
<mat-form-field class="form-element">
<input name="fname" matInput placeholder="Ime" formControlName="firstName" autocomplete="given-name" form="paymentForm">
<mat-error
*ngIf="!formGroup.controls['firstName'].valid && formGroup.controls['firstName'].touched">
</mat-error>
</mat-form-field>
<mat-form-field class="form-element">
<input name="lname" matInput placeholder="Prezime" formControlName="lastName" autocomplete="family-name" form="paymentForm">
<mat-error *ngIf="!formGroup.controls['lastName'].valid && formGroup.controls['lastName'].touched">
</mat-error>
</mat-form-field>
<mat-form-field class="form-element">
<input name="bill-address" matInput placeholder="Adresa" formControlName="billingAddress" autocomplete="billing street-address" form="paymentForm">
<mat-error *ngIf="!formGroup.controls['billingAddress'].valid && formGroup.controls['billingAddress'].touched">
</mat-error>
</mat-form-field>
<mat-form-field class="form-element">
<input name="bill-city" matInput placeholder="Grad" formControlName="billingCity" autocomplete="billing address-level2" form="paymentForm">
<mat-error *ngIf="!formGroup.controls['billingCity'].valid && formGroup.controls['billingCity'].touched">
</mat-error>
</mat-form-field>
</div>
<div>
<mat-form-field class="form-element">
<input name="bill-zip" matInput placeholder="Poštanski broj" formControlName="billingPostalNumber" autocomplete="billing postal-code" form="paymentForm">
<mat-error
*ngIf="!formGroup.controls['billingPostalNumber'].valid && formGroup.controls['billingPostalNumber'].touched">
</mat-error>
</mat-form-field>
<mat-form-field class="form-element">
<input name="bill-country" matInput placeholder="Država" formControlName="billingCountry" autocomplete="billing country" form="paymentForm">
<mat-error *ngIf="!formGroup.controls['billingCountry'].valid && formGroup.controls['billingCountry'].touched">
</mat-error>
</mat-form-field>
<mat-form-field class="form-element">
<input name="email" matInput placeholder="e-mail" formControlName="email" autocomplete="email" type="email" form="paymentForm">
<mat-error *ngIf="!formGroup.controls['email'].valid && formGroup.controls['email'].touched">
</mat-error>
</mat-form-field>
<mat-form-field class="form-element">
<input name="phone" matInput placeholder="Broj telefona" formControlName="phoneNumber" autocomplete="tel" type="tel" form="paymentForm">
<mat-error
*ngIf="!formGroup.controls['phoneNumber'].valid && formGroup.controls['phoneNumber'].touched">
</mat-error>
</mat-form-field>
</div>
</div>
<div class="buttons-element">
<div class="pay-button-element">
<button mat-raised-button color="primary" type="submit" class="button"
[disabled]="!formGroup.valid">Plati</button>
</div>
<div class="cancel-button-element">
<button mat-button color="secondary" type="submit" class="button">Odustani</button>
</div>
</div>
</div>
</form> ```
通过从 autocomplete 值中删除单词 billing
并从 name 值中删除 bill-
来修复它。
例如
之前autocomplete="billing postal-code" name="zip"
之前autocomplete="postal-code" name="zip"
仅更改 自动完成 字段就足够了。
计费和联系信息分别触发自动填充。
例如,当我单击以下 4 个输入填充中的任何一个时,它会为它们提供自动填充 => 名字、姓氏、phone 号码和电子邮件。当我点击以下 4 个中的任何一个时,它会同时触发它们的自动填充 => 账单地址、账单邮政编码、账单国家、账单城市。
自动填充适用于两组中的每一组,但我希望它是一个通过选择 8 个输入字段中的任何一个来自动填充的组。
代码示例(我使用 Angular 8 和 Material 设计组件,但我认为这不应该造成干扰,因为我认为这是一个 HTML 问题) :
<form method="post" id="paymentForm" [formGroup]="formGroup" (ngSubmit)="onSubmit(formGroup.value)" class="form" >
<div class="customer-info">
<div class="customer-info-personal">
<div>
<mat-form-field class="form-element">
<input name="fname" matInput placeholder="Ime" formControlName="firstName" autocomplete="given-name" form="paymentForm">
<mat-error
*ngIf="!formGroup.controls['firstName'].valid && formGroup.controls['firstName'].touched">
</mat-error>
</mat-form-field>
<mat-form-field class="form-element">
<input name="lname" matInput placeholder="Prezime" formControlName="lastName" autocomplete="family-name" form="paymentForm">
<mat-error *ngIf="!formGroup.controls['lastName'].valid && formGroup.controls['lastName'].touched">
</mat-error>
</mat-form-field>
<mat-form-field class="form-element">
<input name="bill-address" matInput placeholder="Adresa" formControlName="billingAddress" autocomplete="billing street-address" form="paymentForm">
<mat-error *ngIf="!formGroup.controls['billingAddress'].valid && formGroup.controls['billingAddress'].touched">
</mat-error>
</mat-form-field>
<mat-form-field class="form-element">
<input name="bill-city" matInput placeholder="Grad" formControlName="billingCity" autocomplete="billing address-level2" form="paymentForm">
<mat-error *ngIf="!formGroup.controls['billingCity'].valid && formGroup.controls['billingCity'].touched">
</mat-error>
</mat-form-field>
</div>
<div>
<mat-form-field class="form-element">
<input name="bill-zip" matInput placeholder="Poštanski broj" formControlName="billingPostalNumber" autocomplete="billing postal-code" form="paymentForm">
<mat-error
*ngIf="!formGroup.controls['billingPostalNumber'].valid && formGroup.controls['billingPostalNumber'].touched">
</mat-error>
</mat-form-field>
<mat-form-field class="form-element">
<input name="bill-country" matInput placeholder="Država" formControlName="billingCountry" autocomplete="billing country" form="paymentForm">
<mat-error *ngIf="!formGroup.controls['billingCountry'].valid && formGroup.controls['billingCountry'].touched">
</mat-error>
</mat-form-field>
<mat-form-field class="form-element">
<input name="email" matInput placeholder="e-mail" formControlName="email" autocomplete="email" type="email" form="paymentForm">
<mat-error *ngIf="!formGroup.controls['email'].valid && formGroup.controls['email'].touched">
</mat-error>
</mat-form-field>
<mat-form-field class="form-element">
<input name="phone" matInput placeholder="Broj telefona" formControlName="phoneNumber" autocomplete="tel" type="tel" form="paymentForm">
<mat-error
*ngIf="!formGroup.controls['phoneNumber'].valid && formGroup.controls['phoneNumber'].touched">
</mat-error>
</mat-form-field>
</div>
</div>
<div class="buttons-element">
<div class="pay-button-element">
<button mat-raised-button color="primary" type="submit" class="button"
[disabled]="!formGroup.valid">Plati</button>
</div>
<div class="cancel-button-element">
<button mat-button color="secondary" type="submit" class="button">Odustani</button>
</div>
</div>
</div>
</form> ```
通过从 autocomplete 值中删除单词 billing
并从 name 值中删除 bill-
来修复它。
例如
之前autocomplete="billing postal-code" name="zip"
之前autocomplete="postal-code" name="zip"
仅更改 自动完成 字段就足够了。