IE 10+ 中的 Element.focus() + css 动画定位问题答案

【问题标题】：Element.focus() + css animation positioning issue in IE 10+IE 10+ 中的 Element.focus() + css 动画定位问题
【发布时间】：2015-02-10 22:27:49
【问题描述】：

在 IE 11 中遇到了一个奇怪的行为，想看看有没有其他人看到过。我在带有height: 0px; 和overflow: hidden; 的容器中有一个输入元素。另一个元素触发容器上的一个活动类，通过 CSS 过渡给它一些高度。相同的触发器在输入上调用focus()。

在 IE 10 和 11 中，似乎在 CSS 动画期间调用 focus() 会导致输入元素在动画的该阶段冻结在其位置。

Here is a fiddle

注意，在 IE 10+ 中，输入光标偏离垂直中心。如果您从 CSS 中删除过渡，它将居中。

其他人看到这个或有更好的解决方案？

【问题讨论】：

标签： javascript css internet-explorer

【解决方案1】：

目前，我的解决方案是将 focus() 调用包装在与 CSS 动画持续时间匹配的 setTimeout 中，以确保在字段到达过渡结束之前不会发生焦点。不理想，因为它独立地混合了 CSS 和 JS 值，但它现在可以工作。

【讨论】：

【解决方案2】：

这是已知的 IE 问题 - 光标在输入转换之前停留在同一位置。解决方案正如@steve 所写 - 仅在过渡结束后才关注。

您可以使用这个角度解决方案：

angular.module('my.directive')
  .directive('custom-auto-focus', function ($timeout) {
    return {
      link: function (scope, elm) {
        $timeout(function() {
          elm[0].focus();
        }, 350);
      }
    };
  });

【讨论】：