jQuery焦点锁定焦点在Angular4;尝试将焦点设置为页面上的第一个输入错误

时间:2017-10-12 19:41:17

标签: jquery angular

我是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()尝试将用户引导到第一个错误。这是目标,将用户的注意力集中在页面上的第一个错误上。任何帮助将不胜感激。

0 个答案:

没有答案