作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我在 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();
});
});
};
}
]);
/* 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>
最佳答案
感谢您记录此问题并进行诊断。这是我能找到的唯一主题,这似乎是一个常见问题。这个脚本解决方案是不是有点矫枉过正?
问题的 css 解决方案::
.modal.fade {
transition:opacity .3s linear;
}
它会杀死幻灯片效果,但会淡入淡出。
关于html - 在 Internet Explorer 中使用自动对焦时模态中奇怪的光标放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25764824/
我是一名优秀的程序员,十分优秀!