admin管理员组文章数量:1023018
jsfiddle here
This is a bug specific to IE and I'm looking for a work around.
When I apply a CSS transform: translate to a text input, that has the focus, with transition set to something valid, the cursor stays in the old location while the element moves.
Once you start typing it moves to the correct location, but before that the cursor stubbornly blinks at the old location.
This code illustrates the problem... again, it's an IE specific bug.
var toggleTop = function(){
$('.input-container').toggleClass('top');
$('#the-input').focus();
}
$('#the-button').click(toggleTop);.input-container {
top: 100px;
left: 100px;
position: fixed;
transition: all 1s;
}
.input-container.top {
transform: translateY(-100px);
}<script src=".1.1/jquery.min.js"></script>
<div class='input-container'>
<input type='text' id='the-input'></input>
</div>
<button id='the-button'>Click Me!</button>jsfiddle here
This is a bug specific to IE and I'm looking for a work around.
When I apply a CSS transform: translate to a text input, that has the focus, with transition set to something valid, the cursor stays in the old location while the element moves.
Once you start typing it moves to the correct location, but before that the cursor stubbornly blinks at the old location.
This code illustrates the problem... again, it's an IE specific bug.
var toggleTop = function(){
$('.input-container').toggleClass('top');
$('#the-input').focus();
}
$('#the-button').click(toggleTop);.input-container {
top: 100px;
left: 100px;
position: fixed;
transition: all 1s;
}
.input-container.top {
transform: translateY(-100px);
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-container'>
<input type='text' id='the-input'></input>
</div>
<button id='the-button'>Click Me!</button>2 Answers
Reset to default 4One year passed, and I've encountered this issue as well. Here is angular.js directive that I used to fixed it, based on the accepted answer's code and explanation.
angular.module('my.directive')
.directive('custom-auto-focus', function ($timeout) {
return {
link: function (scope, elm) {
$timeout(function() {
elm[0].focus();
}, 350);
}
};
});
Is there any reason why you can't wait for the transition to end before focusing on the element? Considering you're using CSS transitions you should have access to transitionend event.
This fixes the issue:
var toggleTop = function () {
var inputContainer = $('.input-container'),
input = inputContainer.find('#the-input');
inputContainer.toggleClass('top');
inputContainer.one('transitionend', function () {
input.focus();
});
};
$('#the-button').click(toggleTop);
Updated JSFiddle
jsfiddle here
This is a bug specific to IE and I'm looking for a work around.
When I apply a CSS transform: translate to a text input, that has the focus, with transition set to something valid, the cursor stays in the old location while the element moves.
Once you start typing it moves to the correct location, but before that the cursor stubbornly blinks at the old location.
This code illustrates the problem... again, it's an IE specific bug.
var toggleTop = function(){
$('.input-container').toggleClass('top');
$('#the-input').focus();
}
$('#the-button').click(toggleTop);.input-container {
top: 100px;
left: 100px;
position: fixed;
transition: all 1s;
}
.input-container.top {
transform: translateY(-100px);
}<script src=".1.1/jquery.min.js"></script>
<div class='input-container'>
<input type='text' id='the-input'></input>
</div>
<button id='the-button'>Click Me!</button>jsfiddle here
This is a bug specific to IE and I'm looking for a work around.
When I apply a CSS transform: translate to a text input, that has the focus, with transition set to something valid, the cursor stays in the old location while the element moves.
Once you start typing it moves to the correct location, but before that the cursor stubbornly blinks at the old location.
This code illustrates the problem... again, it's an IE specific bug.
var toggleTop = function(){
$('.input-container').toggleClass('top');
$('#the-input').focus();
}
$('#the-button').click(toggleTop);.input-container {
top: 100px;
left: 100px;
position: fixed;
transition: all 1s;
}
.input-container.top {
transform: translateY(-100px);
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-container'>
<input type='text' id='the-input'></input>
</div>
<button id='the-button'>Click Me!</button>2 Answers
Reset to default 4One year passed, and I've encountered this issue as well. Here is angular.js directive that I used to fixed it, based on the accepted answer's code and explanation.
angular.module('my.directive')
.directive('custom-auto-focus', function ($timeout) {
return {
link: function (scope, elm) {
$timeout(function() {
elm[0].focus();
}, 350);
}
};
});
Is there any reason why you can't wait for the transition to end before focusing on the element? Considering you're using CSS transitions you should have access to transitionend event.
This fixes the issue:
var toggleTop = function () {
var inputContainer = $('.input-container'),
input = inputContainer.find('#the-input');
inputContainer.toggleClass('top');
inputContainer.one('transitionend', function () {
input.focus();
});
};
$('#the-button').click(toggleTop);
Updated JSFiddle
本文标签： javascriptCursor in wrong position in IE11 after CSS transform w transitionStack Overflow
版权声明：本文标题：javascript - Cursor in wrong position in IE11 after CSS transform w transition - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745579925a2157247.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论