Chrome自动完成锁定输入，例如不可点击

Question

我在Chrome中自动填充时遇到问题，并且行为很奇怪。当我登录然后从应用程序注销时，输入字段（电子邮件，密码）是自动完成的，但是这些字段看起来像是被冻结并且不可单击。

并非每次都复制此错误，而是在1/10情况下发生。我在注销时注意到字段是自动完成的，在1秒钟后输入中的字体变小，此后如果您单击输入那里似乎没有单击，则什么也没有发生，但是如果您键入一些文本（数字不起作用，则保持类似冻结）输入字段照常进行。

这是行为异常的gif：https : //gifyu.com/image/kTkX

我尝试设置autocomplete="off"，但不起作用。

另外，我在输入字段中匹配了所有css的clase，以查看是否有一些覆盖的css，但是一切看起来都不错。

<form [formGroup]="loginForm">

<input id="emailHeader" type="text" formControlName="email" placeholder="E-mail">

<input #password type="password" formControlName="password" placeholder="Lozinka">
<input type="submit" (click)="executeLogin()"  value="Prijava">

</form> 

我希望字段不会在自动填充后被冻结。

public loginForm: FormGroup;
  public emailInput: ElementRef;
  public passwordInput: ElementRef;
  @ViewChild('email') set emailContent(content: ElementRef) {
    this.emailInput = content;
  }
  @ViewChild('password') set passwordContent(content: ElementRef) {
    this.passwordInput = content;
  }

  // UI helpers
  public showLoginForm: boolean;
  public showBalance: boolean;
  public player: PlayerModel = new PlayerModel({});
  public balanceInfo: BalanceInfoModel = new BalanceInfoModel({});
  public nxcsBalanceInfo: NXCSBalanceInfoModel = new NXCSBalanceInfoModel({});
  public dialogType = DialogType;
  public customMessageError = '';

  // Store
  private headerState$: Observable<any>;
  private loginState$: Observable<any>;
  private playerState$: Observable<any>;
  private emailInput$: Observable<any>;
  private passwordInput$: Observable<any>;
  private balanceState$: Observable<any>;
  private headerSubscription: Subscription;
  private loginSubscription: Subscription;
  private playerSubscription: Subscription;
  private emailSubscription: Subscription;
  private passwordSubscription: Subscription;
  private balanceSubscription: Subscription;
  // tslint:disable-next-line:no-inferrable-types
  private leftMenu: string = '';
  // tslint:disable-next-line:no-inferrable-types
  private rightMenu: string = '';

  constructor(
    private authService: AuthService,
    private fb: FormBuilder,
    private store: Store<any>,
    private route: Router,
    private localStorageService: LocalStorageService,
    private playerService: PlayerService,
    private notificationService: NotificationService,
    private dialogService: DialogService,
    private helpers: HelpersService,
    private translateCode: TranslateCode,
        private promotionService: PromotionService,
    ) {
    this.loginForm = this.buildLoginForm();
  }

  ngOnInit() {
    this.setupStore();
  }

  ngAfterViewInit() {
    this.formEventsAfterViewInit();
  }

  ngOnDestroy() {
    this.headerSubscription.unsubscribe();
    this.loginSubscription.unsubscribe();
    this.playerSubscription.unsubscribe();
    this.notificationService.closeConnection();
  }

  public executeLogin() {
    if(!this.loginForm.valid) {
      this.customMessageError = this.translateCode.transform("EMPTY_INPUT_MESSAGE");
      return;
    }

    this.authService.login(new LoginModel({...this.loginForm.value, details: this.helpers.sendSessionData()}))
      .subscribe(
        data => {
          this.localStorageService.setUserAfterLogin(data.token);
          this.customMessageError = '';
          this.loginForm.reset();
          this.route.navigate(['/app/casino']);
        },
        error => {
          error.message.includes('Ra?un je zaklju?an') ? this.store.dispatch(new PopupNotification(error.message)) : this.customMessageError = error.message
          this.addAfterErrorSubscription();
        }
      );
  }

  public openDialog(dialogType: string): void {
    switch (dialogType) {
      case DialogType.PAYMENT:
         this.openWithdrawalDialog()
        break;
      case DialogType.PAYMENT_DEPOSIT:
          this.checkRegistrationStep();
      break;
      case DialogType.TRANSACTION_HISTORY:
        this.store.dispatch(new OpenDialog({
          type: dialogType,
        }));
      break;
    }
  }

  public openInternalTransactionsDialog(): void {
    this.promotionService.getPromotionsByLocation('NXCS_DEPOSIT')
      .subscribe(
                data => this.dialogService.openDialog(MENU_DIALOGS.INTERNAL_TRANSACTION, { promotions: data }),
        error => this.dialogService.openDialog(MENU_DIALOGS.INTERNAL_TRANSACTION, { promotions: []}),
      );
  }

  public backToRegistrationStep() : void {
    switch (this.player.registrationStep) {
      case 1 :  this.route.navigate(['/auth/registration/step-two']);
                break;
      case 2 : this.route.navigate(['/auth/registration/step-three']);
                break;
      case 3 : this.route.navigate(['/auth/registration/step-four']);
                break;
      case 4 : this.route.navigate(['/auth/registration/step-five']);
                break;
      case 5 : this.route.navigate(['/auth/registration/step-six']);
                break;
      default : this.route.navigate(['/login']);
                break;
    } 
  }

  public toggleMenu(dialog): void {
    if (dialog === 'left') {
      this.leftMenu = this.leftMenu === dialog ? '' : dialog;
    }
    if (dialog === 'right') {
      this.rightMenu = this.rightMenu === dialog ? '' : dialog;
    }
    this.dispatchShadow();
  }

  private openWithdrawalDialog(_data: any = {}): void {
    const playerRole = this.localStorageService.getPlayer()['profileRole'];

    if (playerRole  === 'WITHDRAWAL_DISABLED' && this.player.uploadedAdditionalInfo) {
      this.store.dispatch(new OpenNotification({ type: NotificationType.WITHDRAWAL_DISABLED }));
      return;
    }

    playerRole  === 'WITHDRAWAL_DISABLED' ?
    this.store.dispatch(new OpenNotification({type: NotificationType.MONEY_LAUNDERING})) :
    this.dialogService.openDialog(MENU_DIALOGS.WHITDRAWALS, _data);
  }

  private openProceedToRegistration(): void {
    this.store.dispatch(new OpenNotification ({type: NotificationType.PROCEED_REGISTRATION}))
  }

  private checkRegistrationStep(): void {
    if(this.player.registrationStep < 6) {
      this.openProceedToRegistration();
    } else {
      this.dialogService.openDialog(MENU_DIALOGS.DEPOSITS, {});
    }
  }

  private dispatchShadow(): void {
    if (this.leftMenu !== '') {
      this.store.dispatch(new OpenedLeftMenu());
      this.leftMenu = '';
    }
    if (this.rightMenu !== '') {
      this.store.dispatch(new OpenedRightMenu());
      this.rightMenu = '';
    }
  }

  private buildLoginForm(): FormGroup {
    return this.fb.group({
      email: [
        '', Validators.compose([Validators.required, Validators.min(5)]),
      ],
      password: [
        '', Validators.compose([Validators.required, Validators.min(5)])
      ],
    });
  }

  private loadBalance(): void {
    this.playerService.getPlayerBalance().toPromise()
      .then(data => this.store.dispatch(new SetPlayerBalance({balanceInfo: new BalanceInfoModel(data) })))
      .then(() => {
        if (this.player.externalId) {
          this.playerService.getNXCSPlayerBalance()
            .subscribe(
              data => this.store.dispatch(new SetPlayerNXCSBalance({ nxcsBalanceInfo: new NXCSBalanceInfoModel(data) })),
              error => console.log(error),
            );
        }
      });
  }

  // Store methods
  private setupStore(): void {
    this.headerState$ = this.store.pipe(select('headerStore'));
    this.loginState$ = this.store.pipe(select('loginStore'));
    this.playerState$ = this.store.pipe(select('playerStore'));
    this.balanceState$ = this.store.pipe(select('balanceStore'));
    this.addSubscriptions();
  }

  private formEventsAfterViewInit(): void {
    if (this.emailInput && this.passwordInput) {
      this.emailInput$ = fromEvent(this.emailInput.nativeElement, 'focus');
      this.passwordInput$ = fromEvent(this.passwordInput.nativeElement, 'focus');
      this.addFormEventsSubscriptions();
    }
  }

  private addFormEventsSubscriptions(): void {
      this.emailSubscription = this.emailInput$.subscribe(() => this.triggerEmailFocus());
      this.passwordSubscription = this.passwordInput$.subscribe(() => this.triggerPasswordFocus());
  }

  private triggerEmailFocus(): void {
    this.emailInput.nativeElement.select();
    if (this.emailSubscription) {
      this.emailSubscription.unsubscribe();
    }
  }

  private triggerPasswordFocus(): void {
    this.passwordInput.nativeElement.select();
    if (this.passwordSubscription) {
      this.passwordSubscription.unsubscribe();
    }
  }

  private addSubscriptions(): void {
    this.addHeaderSubscription();
    this.addLoginSubscription();
    this.addPlayerSubscription();
    this.setBalanceSubscription();
  }

  private addHeaderSubscription(): void {
    this.headerSubscription = this.headerState$
    .subscribe(headerState => this.showLoginForm = headerState !== HeaderActionTypes.LoginPage);
  }

  private addLoginSubscription(): void {
    this.loginSubscription = this.loginState$
    .subscribe(loginState => {
      if (loginState) {
        this.loadBalance();
        this.notificationService.connect(localStorage.getItem('token'));
      } else {
        this.notificationService.closeConnection();
      }
      this.showBalance = loginState;
      this.formEventsAfterViewInit();
    });
  }

  private addPlayerSubscription(): void {
    this.playerSubscription = this.playerState$
    .subscribe(playerData => this.player = playerData);
  }

  private addAfterErrorSubscription(): void {
    this.passwordSubscription = this.passwordInput$.subscribe(() => {
      if (this.customMessageError !== '') {
        this.customMessageError = '';
        this.passwordSubscription.unsubscribe();
      }
    });
  }

}

Answer 1

您尝试过使用a href标签吗？我知道这是一件显而易见的事情，但有时我们会忘记做这样的事情。a:hover此外，您还可以在 CSS 中使用该标签。