在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(函数(){
自动对焦();
});
}
]
});
}]);
标记
<形式为GT;
< DIV CLASS =模头>
< H3类=模式标题>!我是一个模式< / H3 GT&;
< / DIV>
< DIV CLASS =模体>
<输入类型=TEXTNAME =foo的自动对焦>
< BR>
<输入类型=文本名称=酒吧>
< / DIV>
< DIV CLASS =模式躯>
<按钮式=提交级=BTN BTN-小学>确定< /按钮>
<按钮式=按钮级=BTN BTN-警告NG点击=$解雇()>取消< /按钮>
< / DIV>
< /表及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屋!