2012-08-15 4 views
1

Chrome에서 jquery (즉, var $ textarea = $ (''))를 사용하여 프로그래밍 방식으로 만든 HTML과 단위 테스트 상호 작용을 위해 qunit 프레임 워크를 사용하고 있습니다. 텍스트 영역에서 선택 항목을 업데이트 할 때 사용하는 코드는 다음과 같습니다.단위 테스트의 Javascript setSelectionRange가 예상대로 작동하지 않습니다.

TextAreaView.prototype.setSelectionOffsets = function(cursor) { 
    var input = this.$textarea.get(0); 
    if (!input.setSelectionRange) { 
     return; 
    } 
    if (cursor.start <= input.value.length && cursor.end <= input.value.length) { 
     input.focus(); 
     input.setSelectionRange(cursor.start, cursor.end, "forward"); 
    } 
} 

내가 0 < cursor.start == cursor.end < input.value.length이 메소드를 호출하고 있음을 확인했습니다.

디버거를 단계별로 실행하면 "input.setSelectionRange"라인에 도달 한 후 입력 요소를 검사하면 selectionEnd 및 selectionStart 속성 = 0, selectionDirection = "none"이 표시됩니다.

나는 여기서 무슨 일이 일어나고 있는지 매우 혼란 스럽다. textarea 요소에서 Mozilla's documentation을 읽었으며 setSelectionRange에 대한 호출이 유효하다고 생각합니다. 이 어떻게 든 내가 프로그래밍 방식으로 텍스트 영역을 만든 사실 그것은 실제로 표시되지 않는 관련이있을 수 있습니까?

답변

2

질문을 입력 할 때 이에 대한 답변을 찾았으므로이 문제에 직면 할 수있는 사람에게 내가 공유 할 것으로 생각했습니다. 그 대답은 명백했습니다. 저는 기본적으로 마지막 문장에서 답했습니다 : 나는 $ ('')로 textarea DOM 요소를 만들고 그 객체를 저장하고 있었지만 결코 그 객체를 문서에 삽입하지 않았습니다. 본문에 요소를 추가 한 후 setSelectionRange가 선택 영역을 예상대로 업데이트합니다. 필자의 상황에서는 단위 테스트 결과 페이지에 실제 텍스트 영역을 표시하는 것이 바람직하지 않지만 $ textarea.hide()를 호출하면 쉽게 수정할 수 있습니다.

관련 문제