表单域之间的快速表单选项卡

Question

编辑字段时，我在窗口外单击，它失去焦点。然后，当我在不同字段中单击返回窗口时，焦点将在两个表单字段之间快速切换。

此问题发生在 Chrome、IE 和 Firefox 中。表单字段是从问卷 json 文件中提取的一部分，但我注意到它也发生在未从问卷中提取的字段中。

以下是创建表单的 html 和 Angular 代码示例。

    <ng-form name="personalForm">
    <div layout="row" layout-align="center center" ng-repeat="section in sections" ng-show="currentSection >= $index+1" id="section_{{$index}}">
        <md-list id="personalQnsList" layout="row" layout-align="start center" flex="90"> 
        <!-- Questions Layout -->
        <div layout="column" layout-align="start center" flex="100" role="listitem">
            <div class="row sectionLine" layout="row" id='personal_{{$index}}' layout-align="start center" ng-repeat="personalQuestion in section.questions track by $index" ng-if="section.questions[$index-1].valid || $first" ng-class="{'animate-if':$index!=0}">
                <div class="row" layout-align="start center" ng-class="{'ssn': personalQuestion.fieldType == 'ssn' }">
                    <!-- 3 is added to the index to account for the previous questions -->
                    <dynamic-question section-name="section.name" form-name="personalForm" question-index="$index + 3" question-model="personalQuestion" result-produced="resultProduced(result, personalQuestion.fieldType, personalQuestion.fieldMapping)"
                        layout-align="start center" layout-align-xs="center center"></dynamic-question>
                </div>
                <!-- <md-button class="info-icon" ng-if="personalQuestion.info"> <md-icon></md-icon>
                <md-tooltip  class="infoTooltip" md-direction="right"> {{personalQuestion.id |translate}}</md-tooltip> </md-button>   -->
            </div>
        </div>
        </md-list>
    </div>
    <div layout="column" layout-align="center center">
        <md-button class="md-primary md-raised" ng-if="pCtrl.continueFlag" ng-click="pCtrl.reviewPersonalInformation()" aria-label="Continue">Continue</md-button>
        <!-- <md-button class="md-primary md-raised" ng-if="pCtrl.continueFlag && pCtrl.profileContinue" ng-click="pCtrl.reviewPersonalInformation()" aria-label="Continue">Continue</md-button> -->
        <div ng-show="pCtrl.errorMessageFlag" class="error_Msg text-center">There is an error with the information you provided. Please check your fields again</div>
        <div ng-show="pCtrl.errorMessageFlag" class="error_Msg text-center">Please check {{pCtrl.missingFields}} fields again</div>
    </div>
    </ng-form>

Answer 1

你可能有：

1) 一个 Javascript“全局”事件（我 90% 确定它是一个 Jquery 事件）检查用户与您的应用程序元素的每次交互。

2) 此 javascript 事件（可能是 .focus .click 变体）强制始终聚焦其中一个元素（我们称其为元素“x”）。这就是为什么当用户点击任何另一个元素（这个元素可能也有一个带有焦点指令的javascript事件）时，与元素“x”不同，焦点会尝试返回到元素“x”

3）javascript“全局”元素上的两个焦点指令都在相互“战斗”以将焦点集中在它们处理的元素上（事件“x”将焦点“x”用于元素“x”和事件“n”为元素“n”聚焦“n”）

4) 这个 javascript 函数 可能绑定 到您的元素的一个或多个 类名

5) 我对这两行类和可能有界的 javascript 事件特别好奇：

<div class="row sectionLine" layout="row" id='personal_{{$index}}' layout-align="start center" ng-repeat="personalQuestion in section.questions track by $index" ng-if="section.questions[$index-1].valid || $first" ng-class="{'animate-if':$index!=0}">
<div class="row" layout-align="start center" ng-class="{'ssn': personalQuestion.fieldType == 'ssn' }">

总结：我上面提到的都是最常见的事情，因为你没有提供必要的代码让我测试你的应用程序是我能给你的最准确的答案。