在Internet Explorer中使用自动对焦时，在模态奇怪的光标位置 [英] Strange cursor placement in modal when using autofocus in Internet Explorer

问题描述

我在IE中使用自动对焦时，具有光标位置的问题。图像应清晰地显示的问题。

幸运的是，我已经能够重现这在 plunker 。我已经剥离下来到最基本的要素，所以它应该是很容易地看到发生了什么事情。

我如何让IE的行为？

AngularJS （适用于 plunker也可）

  app.directive（自动对焦，[
  '$超时'，函数（$超时）{
      返回功能（范围，ELEM，ATTR）{
          范围。对（'自动对焦'$，功能（E）{
              $超时（函数（）{
                  ELEM [0]。重点（）;
              }）;
          }）;
      };
  }
]）;/ * * http://stackoverflow.com/questions/14833326/how-to-set-focus-in-angularjs /
app.factory（'自动对焦'，['$ rootScope'，'$超时'，函数（$ rootScope，$超时）{
  返回功能（）{
      $超时（函数（）{
          $ rootScope $广播（自动对焦）。
      }）;
  };
}]）;的app.config（['$ stateProvider'，函数（$ stateProvider）{
    $ stateProvider.state（'主'，{
        网址：'/主
    }）;
}]）;的app.config（['$ stateProvider'，函数（$ stateProvider）{
    $ stateProvider.state（'main.modal'，{
        网址：'/莫代尔，
        的OnEnter：['$状态，$ stateParams'，'$模式，自动对焦，
            功能（$状态，$ stateParams，$模式，自动对焦）{
                例如VAR = $ modal.open（{
                    templateUrl：modal.html
                }）;
                instance.result.then（函数（）{
                    // 好
                    // GOTO父状态
                    $ state.go（'^'）;
                }，函数（）{
                    //取消
                    // GOTO父状态
                    $ state.go（'^'）;
                }）;
                instance.opened.then（函数（）{
                  自动对焦（）;
                }）;
            }
        ]
    }）;
}]）;
 

标记

 ＆LT;形式为GT;
  ＆LT; D​​IV CLASS =模头＆GT;
      ＆LT; H3类=模式标题＆GT;！我是一个模式＆LT; / H3 GT＆;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =模体＆GT;
      ＆LT;输入类型=TEXTNAME =foo的自动对焦＆GT;
      ＆LT; BR＆GT;
      ＆LT;输入类型=文本名称=酒吧＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =模式躯＆GT;
      ＆LT;按钮式=提交级=BTN BTN-小学＆GT;确定＆LT; /按钮＆GT;
      ＆LT;按钮式=按钮级=BTN BTN-警告NG点击=$解雇（）＆GT;取消＆LT; /按钮＆GT;
  ＆LT; / DIV＆GT;
＆LT; /表及GT;
 

解决方案

好像我可能是幻灯片 - 动画这是难辞其咎的。
我设法通过强制模式来解决这个淡入无滑动，加入windowClass：模态渐显像这样：

 的app.config（['$ stateProvider'，函数（$ stateProvider）{
    $ stateProvider.state（'main.modal'，{
        网址：'/莫代尔，
        的OnEnter：['$状态，$ stateParams'，'$模式，自动对焦，
            功能（$状态，$ stateParams，$模式，自动对焦）{
                例如VAR = $ modal.open（{
                    templateUrl：modal.html'，
                    windowClass：模态褪色
                }）;
                instance.result.then（函数（）{
                    // 好
                    // GOTO父状态
                    $ state.go（'^'）;
                }，函数（）{
                    //取消
                    // GOTO父状态
                    $ state.go（'^'）;
                }）;
                instance.opened.then（函数（）{
                  自动对焦（）;
                }）;
            }
        ]
    }）;
}]）;
 

I'm having an issue with the cursor placement when using autofocus in IE. The image should display the issue clearly.

Luckily I've been able to reproduce this in a plunker. I've stripped it down to the bare essentials, so it should be easy enough to see what's going on.

How do I make IE behave?

AngularJS (Also available in the plunker)

app.directive('autofocus', [
  '$timeout', function($timeout) {
      return function(scope, elem, attr) {
          scope.$on('autofocus', function(e) {
              $timeout(function() {
                  elem[0].focus();
              });
          });
      };
  }
]);

/* http://stackoverflow.com/questions/14833326/how-to-set-focus-in-angularjs */
app.factory('autofocus', ['$rootScope', '$timeout', function($rootScope, $timeout) {
  return function() {
      $timeout(function() {
          $rootScope.$broadcast('autofocus');
      });
  };
}]);

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('main', {
        url: '/main'
    });
}]);

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('main.modal', {
        url: '/modal',
        onEnter: ['$state', '$stateParams', '$modal', 'autofocus',
            function ($state, $stateParams, $modal, autofocus) {
                var instance = $modal.open({
                    templateUrl: 'modal.html'
                });
                instance.result.then(function () {
                    // OK
                    // GOTO parent state
                    $state.go('^');
                }, function () {
                    // Cancel
                    // GOTO parent state
                    $state.go('^');
                });
                instance.opened.then(function() {
                  autofocus();
                });
            }
        ]
    });
}]);

Markup

<form>
  <div class="modal-header">
      <h3 class="modal-title">I'm a modal!</h3>
  </div>
  <div class="modal-body">
      <input type="text" name="foo" autofocus>
      <br>
      <input type="text" name="bar">
  </div>
  <div class="modal-footer">
      <button type="submit" class="btn btn-primary">OK</button>
      <button type="button" class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
  </div>
</form>

解决方案

It seems like i might be the "slide"-animation which is to blame. i managed to fix this by forcing the modal to fade in without sliding, by adding "windowClass: modal fade in" like so:

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('main.modal', {
        url: '/modal',
        onEnter: ['$state', '$stateParams', '$modal', 'autofocus',
            function ($state, $stateParams, $modal, autofocus) {
                var instance = $modal.open({
                    templateUrl: 'modal.html',
                    windowClass: 'modal fade in'
                });
                instance.result.then(function () {
                    // OK
                    // GOTO parent state
                    $state.go('^');
                }, function () {
                    // Cancel
                    // GOTO parent state
                    $state.go('^');
                });
                instance.opened.then(function() {
                  autofocus();
                });
            }
        ]
    });
}]);

这篇关于在Internet Explorer中使用自动对焦时，在模态奇怪的光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！