解决Angular 6中Chrome自动填充标签重叠问题的方法如下:
autocomplete="off"
属性。例如:
ViewChild
装饰器获取对应的输入框元素,并在组件初始化时将其autocomplete
属性设置为new-password
。例如:import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent implements OnInit {
@ViewChild('usernameInput') usernameInput: ElementRef;
ngOnInit() {
this.usernameInput.nativeElement.autocomplete = 'new-password';
}
}
position: relative
属性,并使用z-index
属性来控制输入框和自动填充标签的层级关系。例如:.parent-container {
position: relative;
z-index: 1;
}
input:-webkit-autofill {
z-index: 2;
}
通过以上方法,可以解决Angular 6中Chrome自动填充标签重叠问题。