angularjs – 如何确定给定div中的某些东西是否具有焦点？

发布时间：2020-12-17 06:54:35 所属栏目：安全来源：网络整理

导读：使用 angularjs,我正在显示这样的2级列表 - first main item - first subitem of the first main item - second subitem of the first main item - AN EMPTY ITEM AS PLACEHOLDER TO ENTER THE NEXT SUBITEM- second main item - first subitem of the secon

使用 angularjs,我正在显示这样的2级列表

- first main item
  - first subitem of the first main item
  - second subitem of the first main item
  - AN EMPTY ITEM AS PLACEHOLDER TO ENTER THE NEXT SUBITEM
- second main item
  - first subitem of the second main item
  - second subitem of the second main item
  - AN EMPTY ITEM AS PLACEHOLDER TO ENTER THE NEXT SUBITEM

为了节省空间,我只想在相应div中的任何内容都有焦点的情况下显示PLACEHOLDER,这样只有一个这样的占位符.我知道有ngFocus,但我更喜欢比创建大量事件处理程序更简单的东西.也许是这样的：

<div ng-focus-model="mainItem.hasFocus" ng-repeat="mainItem in list">
   ... main item line
   ... all subitems
</div>

单向绑定就足够了,因为我不需要设置焦点.

解决方法

这里的问题如下：我们希望避免向每个子节点添加事件侦听器,但只将其添加到父节点.家长将负责采取适当的行动.对此的一般解决方案是使用均匀传播(委托).我们只向父节点附加一个侦听器,当子节点上发生事件时(在此示例中关注输入元素),它将冒泡到父节点,父节点将执行侦听器.

这是指令：

app.directive('ngFocusModel',function () {
    return function (scope,element) {

      var focusListener = function () {
          scope.hasFocus = true;
          scope.$digest();
      };

      var blurListener = function () {
          scope.hasFocus = false;
          scope.$digest();
      };


      element[0].addEventListener('focus',focusListener,true);
      element[0].addEventListener('blur',blurListener,true);
   };
});

该指令侦听事件并相应地设置范围的值,因此我们可以进行条件更改.

这里有几点需要注意.

焦点和模糊事件不会“冒泡”,我们需要使用“事件捕获”来捕获它们.这就是为什么不使用element.on(‘focus / blur’)(它不允许捕获,afaik)而是addEventListener方法.此方法允许我们通过将第三个参数设置为false或true来指定是否将在“事件冒泡”或“事件捕获”上执行侦听器.

我们可以使用“冒泡”的焦点和焦点事件,不幸的是这些在Firefox(focusin和focusout)中不受支持.

这是一个实施的plunker.

更新：
在我看来,这可以使用：focus伪类在纯CSS中完成,唯一的缺点是占位符需要相对于输入元素处于适当的位置(兄弟).见codepen.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!