这是IE特有的错误,我正在寻找解决方法。
当我将CSS transform: translate
应用于具有焦点的文本输入时,transition
设置为有效的值,光标在元素移动时保留在旧位置。
一旦开始输入,它就会移动到正确的位置,但在此之前,光标会在旧位置顽固地闪烁。
此代码说明了问题......再次,它是IE特定的错误。
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.com/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>
&#13;
答案 0 :(得分:4)
一年过去了,我也遇到过这个问题。这是我用来修复它的angular.js指令,基于接受的答案的代码和解释。
angular.module('my.directive')
.directive('custom-auto-focus', function ($timeout) {
return {
link: function (scope, elm) {
$timeout(function() {
elm[0].focus();
}, 350);
}
};
});
答案 1 :(得分:3)
在关注元素之前,有没有理由不等待过渡结束?考虑到您正在使用CSS转换,您应该可以访问transitionend
事件
这解决了这个问题:
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);