当按下键盘上的Tab键时，如何使用Angular 8突出显示UI中的字段

Question

我在这里尝试过这个：

<td style="width: 60%" *ngIf="claimResultField.fieldValue != '' && claimResultField.fieldValue != null && claimResultField.category == 'FiledMatch'">    
<div *ngIf='!editModeName' (dblclick)='editModeName=true' class='cell'>{{claimResultField.fieldName}}</div>
<!-- <div *ngIf='!editModeName' (dblclick)='editModeName=true' class='cell'>{{claimResultField.FieldName}}</div> -->
<textarea autosize [minRows]="2" [maxRows]="7" *ngIf='editModeName' class='cellInput' (keydown.enter)='$event.target.blur()'
[(ngModel)]='claimResultField.fieldName' (focusout)="editModeName=false" ></textarea>
</td>
<td style="width: 40%" *ngIf="claimResultField.fieldValue != '' && claimResultField.fieldValue != null && claimResultField.category == 'FiledMatch'"> 
<!-- <div *ngIf='!editModeValue' (dblclick)='editModeValue=true' (click)='clickFieldValue(claimResultField.valueBoundaries)' class='cell'>{{claimResultField.fieldValue}}</div> -->
<div *ngIf='!editModeValue' (dblclick)='clickFieldValue(claimResultField.valueBoundaries)' class='cell'>{{claimResultField.fieldValue}}</div>
<!-- <div><i class="fa fa-trash"
style="color:#dc3545;font-size: 20px;float: right;"
aria-hidden="true"></i></div> -->
<textarea id={{ResultIndex}}  autosize [minRows]="5" [maxRows]="7" *ngIf='editModeValue' class='cellInput focusElement' (keydown.enter)='$event.target.blur()'
[(ngModel)]='claimResultField.fieldValue' tabindex={{ResultIndex+1}}    (focusout)="focusout()" (change)="resultChange(claimResultField, getClaimData, ResultIndex)"></textarea>
</td>

Answer 1

要突出显示选定的输入表单，请使用css:focus选择器。

input:focus {
outline-color: blue;
}