在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”,如下所示：
我设法通过强制模态淡入而不滑动来修复此问题,方法是添加“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();
});
}
]
});
}]);