커서 전환

Question

jsfiddle here

이 IE와 관련된 버그와 나는 주위에 일을 찾고 있어요 승/변환.

transition으로 설정된 텍스트 입력에 CSS transform: translate을 적용하면 요소가 움직이는 동안 커서가 이전 위치에 남아 있습니다.

입력을 시작하면 올바른 위치로 이동하지만 커서가 이전 위치에서 완곡하게 깜박입니다.

이 코드는 문제를 보여줍니다. 다시 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>

Answer 1

전환이 요소에 초점을하기 전에 끝날 때까지 기다릴 수없는 어떤 이유가 있습니까 ? 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); 

Updated JSFiddle

Answer 2

1 년 경과, 그리고 나뿐만 아니라이 문제가 발생했습니다
이 문제를 해결합니다. 여기에 받아 들여진 대답의 코드와 설명에 기반하여 고치기 위해 사용했던 angular.js 지시어가 있습니다.

angular.module('my.directive') 
  .directive('custom-auto-focus', function ($timeout) { 
    return { 
      link: function (scope, elm) { 
        $timeout(function() { 
          elm[0].focus(); 
        }, 350); 
      } 
    }; 
  });