如果focusout，我必须调用一个api，用于保存输入文本区域的多个动态字段集

Posted 2023-05-09

【中文标题】如果focusout，我必须调用一个api，用于保存输入文本区域的多个动态字段集

【英文标题】：I have to call an api if focusout, for multiple dynamic fieldset which holds input text area

【发布时间】：2021-08-23 15:49:37

【问题描述】：

我将有一个加号按钮，单击按钮时将创建包含两个输入文本区域的字段集。 如果当前字段失去焦点，我的任务是调用 API 这里的问题是，由于创建了多个动态字段集，因此不能采用 Id，因为字段集将具有相同的 ID（不会是唯一的）。 不仅是字段集，还有输入字段 id 我试图通过向其添加索引来赋予 Id 唯一性，但我无法使用 Jquery 中的 ID。

<fieldset class="mb-10 col-md-8" style="padding:10px 0;" id="dbcrFieldsMultiple$index"
ng-repeat="entries in vm.dbcr.dbcrMultipleEntriesDetails">
<div class="col-md-1" ng-hide="true">
<span class="serial-number"> $index + 1 .</span>
</div>
<div class="col-md-5">
<label>Input Stream Name
<span class="requiredField">*</span>
</label>
<md-dialog-content>
<div class="md-dialog-content;padding: 10px;">
<textarea ng-model="entries.dbcrInputStream" id="InputStream" press-enter- 
key="vm.initiateIndex($event,$index,entries.dbcrInputStream,'INPUT_STREAM')" value= 
entries.dbcrInputStream class="form-control" placeholder="Please Enter Input Stream Here"> 
</textarea>
</div>
</md-dialog-content>
</div>
<div class="col-md-5">
<label>Fallback Stream Name<span class="requiredField">*</span></label>
<md-dialog-content>
<div class="md-dialog-content;padding: 10px;">
<textarea ng-model="entries.dbcrFallbackStream" id="InputStream_fallback_$index" press- 
enter-key="vm.initiateIndex($event,$index,entries.dbcrFallbackStream,'FALLBACK_STREAM')"
class="form-control" placeholder="Please Enter Fallback Stream name Here"></textarea>
</div>
</md-dialog-content>
</div>
<div class="fContent col-md-1" ng-if="vm.dbcr.dbcrMultipleEntriesDetails.length > 1">
<br>
<button plan-action-control action="delete" ng-click="vm.removeEntries(entries)" 
style="background: #F44336 !important;color: #eee !important;" class="btn btn-xs">
<md-tooltip md-direction='top' class="actionButtonTooltip">Delete</md-tooltip><span 
style="font-size: 12px;"><em class="fa fa-trash"></em></span></button>
</div>
</fieldset>

如果焦点超出字段集的文本区域，我尝试过 Jquery

setTimeout(function()
$('#dbcrFieldsMultiple').focusout(function()
alert("yes")
)
$('#InputStream').focusout(function()
alert("yes")
)
)

【问题讨论】：

也许你必须用角度本身来做这件事。见这里：itsolutionstuff.com/post/…

这是 angularjs 并且 ng-focus 或 ng-blur 没有按预期工作，如果我在输入字段中给出 ng-blur="callMyFunction($event)" 那么无论进入输入区域我menthod 被调用。但我不希望那样，当焦点单独离开该领域时，menthod shuld 应该调用

【参考方案1】：

为什么要使用 jQuery？ Angular 以完全不同的方式做事。它不需要元素 ID（但你真的不应该复制元素 ID）。只需调用原生的ng-blur 事件

<fieldset class="mb-10 col-md-8" style="padding:10px 0;" id="dbcrFieldsMultiple$index" ng-blur="onInputBlur($event)" >

https://docs.angularjs.org/guide/expression#-event-

在控制器中

$scope.onInputBlur = function (e) 
   // element: console.log(e.target);

【讨论】：

我不想要 ng-mouse ovr / ng-mouseout 如果焦点从该区域移开，那么我需要调用该函数

@User_01 - 我误解了。 ng-blur 是您想要的，如果需要，您可以访问模糊处理程序中的元素。这样，如果您想以这种方式将逻辑应用到某个元素，您可以在模糊处理程序中对其进行测试。我更新了我的答案