textarea.selectionStart가 작동하지 않는 이유는 무엇입니까?

Question

이것은 절대적인 좌절감의 요지에 이르렀습니다. 우리는 텍스트 영역과 관련된 텍스트의 특정 위치에 텍스트를 삽입 할 j를 작성하려고합니다. 그것은 간단해야하지만 지금까지 우리가 알아 내지 못했던 것처럼 보입니다.

무엇이 우리 프로세스를 복잡하게 만드는 것은 삽입하려는 항목에 대한 선택을하는 부동 메뉴가 있다는 것입니다. 그래서 시퀀스는 다음 텍스트 영역에서 원하는 위치에 삽입

• 위치. 디버거 중단 점을 사용하여 Visual Studio 디버거는 textarea 객체에 selectionStart 및 selectionEnd가 올바른 값을 가진 숫자로 정의되어 있음을 나타냅니다. 그 휴식 시간에 selectionSart 및 selectionEnd에 액세스하는 js를 작성하고 작성하십시오. 정의되지 않은 항목 (의미가 없지만 다른 모든 사람에게 동일한 문제가 있다고하는 많은 게시물이 여기에 있음)

• td 요소가 텍스트를 삽입하는 함수를 호출하는 테이블의 div 래퍼 일뿐입니다). td 요소를 정확히 클릭하면 텍스트가 속한 곳에 삽입됩니다. 언제든지 td 요소 외부를 클릭하지만 메뉴 내부를 클릭하면 문서 영역이 텍스트 영역의 시작 부분으로 재설정되고 잘못된 위치에 삽입됩니다.

• 우리는 메뉴와 관련된 onclick 이벤트 체인을 트래핑하려고 시도했지만 문서 선택이 변경되도록하는 것은 명백한 일이 아니지만 그다지 덜합니다.

• 우리는 텍스트 영역 자체에 onClick을 넣고 텍스트 영역의 현재 범위를 기억하지만 항상 버퍼의 앞쪽에서 끝나는 다양한 해결 방법을 시도했습니다.

간단한 용어로 : 왜 createTextRange 및 문서 선택이 합리적인 방식으로 동작합니까? 해결 방법은 무엇입니까?

이 게시물에 대한 가장 일반적인 답변은 jquery를 사용하는 것으로 보이므로 jquery가 해결할 작업은 무엇입니까?

Answer 1

다음은 캐럿에 삽입하는 방법입니다.

function insertAtCaret (areaId, text) { 
    var txtarea = document.getElementById(areaId), 
     scrollPos = txtarea.scrollTop, 
     strPos = 0, 
     range, front, back, 
     br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
     "ff" : (document.selection ? "ie" : false)); 
    if (br == "ie") { 
     txtarea.focus(); 
     range = document.selection.createRange(); 
     range.moveStart ('character', -txtarea.value.length); 
     strPos = range.text.length; 
    } 
    else if (br == "ff") strPos = txtarea.selectionStart; 

    front = (txtarea.value).substring(0,strPos); 
    back = (txtarea.value).substring(strPos,txtarea.value.length); 
    txtarea.value=front+text+back; 
    strPos = strPos + text.length; 
    if (br == "ie") { 
     txtarea.focus(); 
     range = document.selection.createRange(); 
     range.moveStart ('character', -txtarea.value.length); 
     range.moveStart ('character', strPos); 
     range.moveEnd ('character', 0); 
     range.select(); 
    } 
    else if (br == "ff") { 
     txtarea.selectionStart = strPos; 
     txtarea.selectionEnd = strPos; 
     txtarea.focus(); 
    } 
    txtarea.scrollTop = scrollPos; 
}; 

원래 여기에서 대답에서 얻은 것입니다.