Question

在我的AngularJS应用中，我有一个Bootstrap 3模式（UI Bootstrap），其中包含一些由ng-repeats生成的选择和输入。每当在这些字段中更改值时，我都会立即通过API调用保存数据，然后也通过API调用重新加载视图模型。首次加载模态时，我可以毫无问题地浏览这些元素。但是，当我使用键盘在这些输入或选择中的任何一个中选择/设置一个值时，重新加载视图模型后焦点不会停留在此元素上。由于某种原因，焦点似乎跳到了body元素上。

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="ctrl.close()">
<span aria-hidden="true">&times;</span>
</button>
</div>

<div class="modal-body">    
  ...
<div class="col" ng-repeat="caseValue in attribute.caseValues track by $index">
<select ng-if="attribute.valueType === 'Options'" class="form-control" ng-disabled="caseValue.potentialValues.length === 0" ng-change="ctrl.saveValueToConfig(caseValue.selectedValue, attribute.valueType, ctrl.caseData.caseModels[$index].nodeId)" ng-model="caseValue.selectedValue" ng-options="value as value.name for value in caseValue.potentialValues"></select>

<input ng-if="attribute.valueType === 'QuoteIntake'" class="form-control" ng-disabled="caseValue.selectedValue === null" ng-change="ctrl.saveValueToConfig(caseValue.selectedValue, attribute.valueType, ctrl.caseData.caseModels[$index].nodeId)" ng-model="caseValue.selectedValue" ng-model-options="{updateOn: 'blur'}" ng-keyup="$event.keyCode == 13 && $event.target.blur()">
</div>
  ...
</div>

<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal" aria-label="Save" ng-click="ctrl.save()">Save</button>
</div>

我希望在选择和输入元素中选择/设置一个值后，焦点会一直保留在那里。有谁知道为什么焦点可能会转移到身体元素上？

Bootstrap模式内的输入字段在键入事件后失去焦点

0 个答案: