代码之家 › 专栏 › 技术社区 › Snæbjørn

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

angular-ui-bootstrap modal-dialog internet-explorer angularjs html

Snæbjørn · 技术社区 · 10 年前

在IE中使用自动对焦时,光标位置有问题。图像应该清楚地显示问题。

fubar cursor placement

幸运的是,我能够在 plunker 。我已经把它精简到最基本的部分,所以应该很容易看到发生了什么。

我如何使IE表现?

角度JS (也可在雨击器 )

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();
                });
            }
        ]
    });
}]);

加成

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

3 回复 | 直到 10 年前

ivan.abrash 9 年前

感谢您记录此问题并进行诊断。这是我能找到的关于这个的唯一话题,似乎是一个经常出现的问题。这个剧本解决方案不是有点过火吗?

问题的css解决方案::

.modal.fade {
transition:opacity .3s linear;
}

它在效果上消除了滑动,但留下了淡入。

flemmo87 10 年前

看起来我可能是“幻灯片”——动画,这是罪魁祸首。我设法解决了这个问题,通过添加“windowClass:module淡入”,强制模式淡入而不滑动,如下所示:

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();
                });
            }
        ]
    });
}]);

Lihar Taavighi 9 年前

我使用了此代码并解决了我的问题:

<form>
 <div class="table-condensed">
  <table class="table table-condensed">
    ....
   <tr>
    <td>
        <textarea class="form-control"></textarea>
    </td>
   </tr>
  </tbody>
 </table>
</div>