光标在IE11中的CSS转换w /过渡之后的错误位置 [英] Cursor in wrong position in IE11 after CSS transform w/ transition

问题描述

jsfiddle这里

这是

当我应用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;位置：固定; 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'>点击Me！< / button>  
 

解决方案

在聚焦元素之前不能等待转换结束？考虑到您正在使用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）; 
  

更新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="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>

解决方案

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

这篇关于光标在IE11中的CSS转换w /过渡之后的错误位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！