크롬 setSelectionRange()가 oninput 처리기에서 작동하지 않습니다.

Question

일부 자동 완성 코드로 작업하고 있습니다. setSelectionRange()은 oninput 이벤트 핸들러에서 완료된 텍스트를 선택하는 데 사용됩니다. 적어도 Firefox 14에서는 작동하지만 Chrome에서는 작동하지 않습니다 (6, 17).

<input type='text' oninput='select()' /> 

function select(e){ 
    var s = this.value; 
    if (s.length) 
     this.setSelectionRange(s.length-1, s.length); 
} 

내가 크롬의 코드를 디버깅, 그리고 그것은 setSelectionRange()이 실행 된 후 텍스트가 먼저 오른쪽에 선택되어 끈다 : 문제를 보여

단순화 된 코드는 다음과 같이이다 , 그러나 선택은 나중에 사라졌다.

는이 같은, onclick 대신 oninput에 처리기를 바인딩 할 경우

<input type='text' onclick='select()' /> 

다음 두 브라우저가 잘 작동합니다.

아무도 Chrome에서 선택 작업을 수행 할 수있는 단서를 제공 할 수 있습니까?

Answer 1

는 select() 함수에 전달 된 매개 변수가 잘못 즉 것을, 당신의 코드에 몇 가지 문제가 있습니다 this는 window되며 e는 정의되지 않습니다. 또한 oninput 특성 내에서 함수 이름으로 select()을 사용하면 select가 입력 자체의 select() 메서드로 해결되기 때문에 문제가 발생합니다. 보통 이벤트 핸들러 속성을 사용하는 대신 스크립트에서 이벤트 핸들러를 설정하는 것이 더 나은 접근 방법입니다.

그러나 이러한 문제를 해결 한 후에도 문제가 발생합니다. 브라우저가 Chrome에서 캐럿을 이동하기 전에 input 이벤트가 발생했을 수 있습니다. 간단한 해결 방법은 타이머를 사용하는 것입니다. 타이머가 작동하기 전에 사용자가 다른 문자를 입력 할 가능성이 있기 때문에 이것이 최적이 아닙니다.

데모 : http://jsfiddle.net/XXx5r/2/

코드 :

<input type="text" oninput="selectText(this)"> 

<script type="text/javascript"> 
function selectText(input) { 
    var s = input.value; 
    if (s.length) { 
     window.setTimeout(function() { 
      input.setSelectionRange(s.length-1, s.length); 
     }, 0); 
    } 
} 
</script>