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＆＃34; global＆＃34;事件（我90％确定它是一个Jquery事件）检查用户与您的应用元素的每次互动。

2）此javascript事件（可能是.focus .click变体）强制始终关注其中一个元素（让我们将其称为元素＆＃34; x＆＃34;）。这就是为什么当用户点击任何其他元素时（这个元素可能也有一个javascript事件，里面有一个焦点指令）不同的元素＆＃34; x＆＃34;焦点试图回到元素＆＃34; x＆＃34;

3）关注javascript＆＃34; global＆＃34;元素是＆＃34;格斗＆＃34;彼此关注他们处理的元素（事件＆＃34; x＆＃34;聚焦＆＃34; x＆＃34;元素＆＃34; x＆＃34;和事件＆＃34; n＆＃34 ;关注元素＆＃34; n＆＃34;）

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' }">

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

在表单字段之间快速形成选项卡

1 个答案: