html5 – 在Internet Explorer中使用自动对焦时,模态中的奇怪光标位置

在IE中使用自动对焦时,我遇到光标放置问题.图像应清楚地显示问题.

幸运的是,我已经能够在plunker中重现这一点.我已经将它剥离到了基本要素,所以它应该很容易看到发生了什么.

我如何使IE表现？

AngularJS(也可在plunker中获得)

app.directive('autofocus',[
  '$timeout',function($timeout) {
      return function(scope,elem,attr) {
          scope.$on('autofocus',function(e) {
              $timeout(function() {
                  elem[0].focus();
              });
          });
      };
  }
]);
 
/* https://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();
                });
            }
        ]
    });
}]);

标记

<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>

解决方法

看起来我可能是“幻灯片” – 动画应该受到指责.
我设法通过强制模态淡入而不滑动来修复此问题,方法是添加“windowClass：modal fade in”,如下所示：

app.config(['$stateProvider',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();
                });
            }
        ]
    });
}]);

html5 – 在Internet Explorer中使用自动对焦时,模态中的奇怪光标位置

解决方法

猜你在找的HTML5相关文章