如何检测焦点何时离开 Div？

Question

我正在处理生成大量 Div 的动态表单。我想检测焦点是否从整个 div 中丢失，而不仅仅是从一个输入中丢失。

如图所示，我有多个相同的表单，这里的问题是如何检测用户是否完成了其中一个表单的编辑？

表单是使用 ng-repeat 动态创建的。

<fieldset  data-ng-repeat="response in responces" ng-init="sectionIndex = $index" >
    <div id="customFrom">
    <input type="text" ng-model="response.code" name="" placeholder="Code">
    <input type="text" ng-model="response.rank" name="" placeholder="{{ 'app.forms.responses.rank' | translate }}" >
    <input type="text" ng-model="response.value" name="" placeholder="{{ 'app.forms.responses.value' | translate }}">
    <input type="text" ng-model="response.name" name="" placeholder="{{ 'app.forms.createQuiz.fields.name' | translate }}" class="labelTextQuestionCreation">
    <button class="remove"  ng-click="removeResponse($index)" ng-show="deteteResponceOption">-</button>
    </div>
</fieldset>

当用户从一种形式跳转到另一种形式时，添加动作的最佳方式是什么？我需要检测表单 (Div) 何时失去焦点以执行功能。谢谢你。

Answer 1

根据你的问题，最好的解决办法是使用ng-model-options.

具有 ng-model 的每个元素都需要以下属性：

ng-model-options="{ updateOn: 'blur' }"

然后看起来像：

<input type="text" ng-model="response.code" name="" ng-model-options="{ updateOn: 'blur' }" placeholder="Code">

使用 ng-model-options，仅当焦点在表单字段上时才会更新模型。然后你可以有一个 $watch 语句，它只在模型更新时触发。

在 $watch 回调中，当检测到主数组的任何属性发生变化时，您可以运行模型通过验证来了解是否所有数据都已填写并继续执行所需的功能。

$scope.$watch('responces', function (newVal, oldVal) {
    // onBlur triggered an update to an attribute of **responces**
    // run your input validation here
}, true);

Answer 2

我解决了问题通过使用指示表单索引的隐藏输入，此输入的值被添加到模型中，因为我使用的是 ng-repeat，所以每一行都有自己的范围.此外，我使用 ng-focus 指令检查输入是否有焦点，当它有焦点时，我调用一个名为 getSelectedElement(index) 的函数，该函数验证索引是否已更改，如果我们在新索引中，我们 update/Insert 数据库中的行。这是我的解决方案代码：

HTML

 <fieldset  data-ng-repeat="response in responces track by $index" ng-init="sectionIndex = $index">
    <div ng-model-options="{ updateOn: 'blur' }"  >
    <input type="text" ng-model="response.code" name="" placeholder="Code"  ng-focus="getSelectedElement(sectionIndex)">
     <input type="text" ng-model="response.index"  ng-init="response.index=sectionIndex"   ng-value="sectionIndex"  ng-focus="getSelectedElement(sectionIndex)" ng-show="false">
    <input type="text" ng-model="response.rank" name="" placeholder="{{ 'app.forms.responses.rank' | translate }}"  ng-focus="getSelectedElement(sectionIndex)">
    <input type="text" ng-model="response.value" name="" placeholder="{{ 'app.forms.responses.value' | translate }}" ng-focus="getSelectedElement(sectionIndex)">
    <input type="text" ng-model="response.name" name="" placeholder="{{ 'app.forms.createQuiz.fields.name' | translate }}" class="labelTextQuestionCreation" ng-focus="getSelectedElement(sectionIndex)" >
    <button class="remove"  ng-click="removeResponse($index)" ng-show="deteteResponceOption">-</button>
    </div>
</fieldset>

JavaScript

$scope.getSelectedElement=function(index){
 var oldIndex=$scope.responcesSelectedIndex;//Variable to watch, it gets updated when we gain focus. initially it has -1 as a value, and we gain focus on a field it gets updated
 if(oldIndex==-1){//-1 indicates that we are in the first element, no previous index, no need to do any thing just update the old index.
     oldIndex=index;
 }
 $scope.responcesSelectedIndex=index;//Update the old index to be the current so when we call the function again we will have two index values, the new one (As a parameter) and the old one ($scope.responcesSelectedIndex)
 var newIndex=$scope.responcesSelectedIndex;
     if(oldIndex!=newIndex){//Jumping to the new Form
        console.log("Update or Create");
        //Do What You want Here

    }

}

这不是一个完美的解决方案，但它工作得很好。

如何检测焦点何时离开 Div？

How to detect when the focus is out of a Div?

javascript

onblur

angularjs