Question

在输入键进入事件时无法将焦点设置在按钮上。将焦点设置在输入上效果很好，但是按钮上的相同代码根本不起作用。

my.component.html

<form [formGroup]='myFG'>
  <mat-form-field fxFlex appearance="outline">
   <input matInput type="number" 
      #containerWeight>
       formControlName="containerWeight"
       (keydown.enter)="cwInput(containerWeight.value)">
  </mat-form-field>
  <mat-form-field fxFlex appearance="outline">
    <input matInput type="number" 
      #grossWeight
      formControlName="grossWeight"
      (keydown.enter)="gwInput(grossWeight.value)">
  </mat-form-field>
</form>
 <div fxLayout="row" fxLayoutAlign="end end">
      <button mat-raised-button   
         #doneBut 
         color="accent">
       DONE
     </button>
  </div>

my.component.ts

  @ViewChild('grossWeight') grossWeight: ElementRef;
  @ViewChild('doneBut') doneBut: ElementRef;

 cwInput(containerWeight){ //this works perfectly
    if(containerWeight.length>0 && containerWeight>0){
      this.focusMe=!this.focusMe;
      setTimeout(()=>{
        this.grossWeight.nativeElement.focus(); //WORKING
      },0);
    }
  }

 gwInput(grossWeight){ 
    if(grossWeight.length>0 && grossWeight>0){
      this.focusMe=!this.focusMe;
      setTimeout(()=>{
        this.doneBut.nativeElement.focus(); //NOT WORKING
      },0);
    }
  }

这将产生错误“无法读取未定义的属性'focus'”

Answer 1

不太确定为什么，但是如果将边框设置为button:focus，则代码可以正常工作。

button:focus {
  border: 1pt solid transparent;
}

检查此有效的堆叠here。

自动将焦点设置为按钮

1 个答案: