我是Angular的新手,我正在尝试使用jQuery来关注已保存页面上的第一个错误。我使用的jQuery如下:
$('#error1').parent().find('input').focus();
页面视图移动到所需的元素,它确实将焦点设置在该元素上。问题是锁定焦点。我不能专注于任何其他输入,也不能滚动焦点。这不是jQuery设计工作的方式,可以吗?我尝试使用以下代码释放焦点:
setTimeout (() => {
$('#error1').parent().find('input').blur();
}, 1000);
这段代码,虽然它允许我专注于其他输入元素,但仍然不允许我滚动远离原始焦点。页面将一直返回到原始焦点设置的位置。我使用Chrome作为浏览器。任何人都可以帮忙吗?
HTML的一部分如下。 input元素自动创建为 PrimeNg模板的一部分。当条目未生成或无效时,将在保存时显示错误消息。
<p-autoComplete *ngIf="editMode" [(ngModel)]="module.assigneeDetails.CTSRGTReviewAssigneeOne" (ngModelChange)="onDDLChange(module, module.assigneeDetails,'CTSRReviewOne')" (onBlur)="checkUserValidation(module, module.assigneeDetails ,'CTSRReviewOne')" field="FullName" [dropdown]="true" (completeMethod)="searchUL($event,i, module.assigneeDetails.CTSRGTReviewAssigneeTwo)" (onDropdownClick)="handleULDropdown($event, module.assigneeDetails.CTSRGTReviewAssigneeTwo)" [suggestions]="filteredUserList">
<ng-template let-colval pTemplate="item">
<div innerHTML="{{colval.FullName}}"></div>
</ng-template>
</p-autoComplete>
<span *ngIf="!editMode"><span *ngIf="module.assigneeDetails.CTSRGTReviewAssigneeOne?.FullName !== this.translateService.instant('lbl_Select')">{{module.assigneeDetails.CTSRGTReviewAssigneeOne?.FullName}}</span></span>
<div class="errorMsg" [ngClass]="{'noError' : module.assigneeDetails.IsCTSRGTReviewAssigneeOne === false }" [hidden]="(module.assigneeDetails.IsCTSRGTReviewAssigneeOne === true)">{{'lbl_Error_Msg1'|translate}}</div>
目前,我正在使用jQuery来突出显示错误的输入元素,并在每个元素上设置唯一的id。然后我尝试使用上面的.focus()尝试将用户引导到第一个错误。这是目标,将用户的注意力集中在页面上的第一个错误上。任何帮助将不胜感激。