如何在 Angular2 中使用 onBlur 事件？-JavaScript中文网-JavaScript教程资源分享门户

在 Angular2 中，onBlur 事件用于当用户焦点从一个输入字段移开时执行特定的操作。在本文中，我们将学习如何在 Angular2 中使用 onBlur 事件。

步骤

第一步：导入 ElementRef

首先，在组件类中导入 ElementRef：

import { Component, ElementRef } from '@angular/core';

第二步：注入 ElementRef 实例

然后，在组件类构造函数中注入 ElementRef 实例：

constructor(private elRef: ElementRef) {}

第三步：定义 onBlur 函数

接下来，我们需要定义一个名为 onBlur 的函数，该函数将在输入字段失去焦点时被调用。它应该获取当前输入字段的值并执行所需的操作。这里是一个示例 onBlur 函数：

onBlur() {
  const inputValue = this.elRef.nativeElement.value;
  // 执行所需的操作
}

第四步：绑定 onBlur 事件

最后，我们需要在模板中使用 (blur) 属性将 onBlur 事件绑定到输入字段上：

<input type="text" (blur)="onBlur()">

现在，当用户离开输入字段时，onBlur 函数将被调用，并且您可以在其中执行所需的操作。

示例代码

-- -------------------- ---- -------
------ - ---------- ---------- - ---- ----------------

------------
  --------- -----------
  --------- -
    ------ ----------- ------------------
  --
--
------ ----- ------------ -
  ------------------- ------ ----------- --

  -------- -
    ----- ---------- - -------------------------------
    -------------------------------------
    -- -------
  -
-

结论

使用 onBlur 事件对于在 Angular2 中执行特定操作非常有用。通过遵循上述步骤，您可以轻松地将 onBlur 事件添加到您的应用程序中并执行所需的操作。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/25592