[JQUERY] 어떻게 텍스트 상자에 캐럿의 픽셀 (x, y) 좌표를받을 수 있나요?

어떻게 텍스트 상자에 캐럿의 픽셀 (x, y) 좌표를받을 수 있나요?

해결법

1. ---

   1.나는에 대해 검토 한 결과 텍스트 영역 캐럿 좌표 플러그인 유성 자동 완성을위한, 내가 GitHub의 모든 8 플러그인을 평가했습니다 있도록. 우승자는 구성 요소에서까지 텍스트 영역-캐럿 위치하여 있습니다.

   나는에 대해 검토 한 결과 텍스트 영역 캐럿 좌표 플러그인 유성 자동 완성을위한, 내가 GitHub의 모든 8 플러그인을 평가했습니다 있도록. 우승자는 구성 요소에서까지 텍스트 영역-캐럿 위치하여 있습니다.

   미러는

   오프 스크린 작성 정확히 <텍스트 영역>와 같은 스타일이다. 그런 다음, 캐럿의 텍스트 영역까지의 텍스트가 사업부와 에 복사 바로 뒤에 삽입된다. 그런 다음, 스팬의 텍스트 내용이 충실 가짜 사업부의 포장을 재현하기 위해, 텍스트 영역에있는 텍스트의 나머지 부분으로 설정됩니다.

   이 긴 줄을 포장에 관한 모든 가장자리 경우를 처리 보장하는 유일한 방법입니다. 또한 @ 사용자 드롭 다운의 위치를 ​​결정하기 위해 GitHub의에 의해 사용됩니다.

2. ---

   2.참고 :이 대답은 텍스트 커서 / 캐럿의 문자 좌표를 얻는 방법에 대해 설명합니다. 픽셀 좌표를 찾으려면, 당신이 더 확장해야합니다.

   참고 :이 대답은 텍스트 커서 / 캐럿의 문자 좌표를 얻는 방법에 대해 설명합니다. 픽셀 좌표를 찾으려면, 당신이 더 확장해야합니다.

   기억해야 할 첫 번째 일은 커서가 세 가지 상태에있을 수 있다는 것입니다

   IE의 모델이에서 우리는 우리에게 선택에 액세스하여 커서 위치를 (들)을 제공하는 TextRange 개체를 얻을 수 있습니다, 개체을 document.selection를 사용합니다.

   빨리 감기 모델 / 오페라 휴대용 변수 [입력] .selectionStart 및 selectionEnd에 사용.

   가 커서 위치에있는 바인딩 왼쪽으로 두 모델 모두, ​​제로 폭 선택과 같은 일반 의안의 운동성, 커서를 나타냅니다.

   입력 필드에 포커스가없는 경우도이 설정되어 있는지 알 수 있습니다. 내가 존재하는 경우도, 현재의 선택을 교체, 현재 커서 위치에 텍스트 조각을 삽입하려면 다음 코드를 사용하여 좋은 성공을 있었다. 정확한 브라우저, YMMV에 따라.

   function insertAtCursor(myField, myValue) {
   
   /* selecion model - ie */
   if (document.selection) {
     myField.focus();
     sel = document.selection.createRange();
     sel.text = myValue;
   }
   
   /* field.selectionstart/end  firefox */ 
   else if (myField.selectionStart || myField.selectionStart == '0' ) {
   
     var startPos = myField.selectionStart;
     var endPos = myField.selectionEnd;
     myField.value = myField.value.substring(0, startPos)
       + myValue
       + myField.value.substring(endPos, myField.value.length);
   
     myField.selectionStart = startPos + myValue.length;
     myField.selectionEnd = startPos + myValue.length;
     myField.focus();
   } 
   
   // cursor not active/present
   else {
     myField.value += myValue;
   }
   

   버그 참고 : 링크가 올바르게 최고 파라에 표시되지 않습니다.

   선택 개체 : http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx TextRange 개체 : http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

3. ---

   3.나는 그것이 모든 브라우저에서 수행 할 수 있다고 생각하지 않습니다. 누군가가 IE6에서 일을하고있다,하지만 FF 또는 오페라 (AFAIK)에서 작동하지 않습니다. 어쩌면 당신은 모든 브라우저에서 작동하도록 얻을 수 있습니다.

   나는 그것이 모든 브라우저에서 수행 할 수 있다고 생각하지 않습니다. 누군가가 IE6에서 일을하고있다,하지만 FF 또는 오페라 (AFAIK)에서 작동하지 않습니다. 어쩌면 당신은 모든 브라우저에서 작동하도록 얻을 수 있습니다.

   여기에 2005 년부터 블로그 게시물입니다.

from https://stackoverflow.com/questions/29709/how-do-i-get-the-x-y-pixel-coordinates-of-the-caret-in-text-boxes by cc-by-sa and MIT license