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

Question

jQuery를 사용하고 있으며 캐럿의 픽셀 좌표를 가져오는 크로스 브라우저 방법을 찾으려고 합니다. <textarea>모래 input 이 위치 주위에 절대 위치에 div를 배치할 수 있는 상자입니다.

jQuery 플러그인이 있나요?아니면 JavaScript 조각으로 이를 수행할 수 있나요?

Answer 1

나는 텍스트 영역 캐럿 좌표 플러그인을 찾았습니다. 유성 자동 완성, 그래서 GitHub의 플러그인 8개를 모두 평가했습니다.승자는 현재까지, 텍스트 영역 캐럿 위치 ~에서 요소.

특징

• 픽셀 정밀도
• 전혀 종속성이 없습니다
• 브라우저 호환성:크롬, 사파리, 파이어폭스(그럼에도 불구하고) 둘 버그 있음), IE9+;작동할 수 있지만 Opera, IE8 이하에서는 테스트되지 않았습니다.
• 모든 글꼴 계열과 크기는 물론 텍스트 변환도 지원합니다.
• 텍스트 영역에는 임의의 패딩이나 테두리가 있을 수 있습니다.
• 텍스트 영역의 가로 또는 세로 스크롤 막대로 혼동되지 않음
• 텍스트에서 하드 리턴, 탭(IE 제외) 및 연속 공백을 지원합니다.
• 텍스트 영역의 열보다 긴 줄의 올바른 위치
• 아니요 빈 공간의 "유령" 위치 긴 단어를 줄바꿈할 때 줄 끝에서

여기 데모가 있습니다 - http://jsfiddle.net/dandv/aFPA7/

작동 원리

거울 <div> 화면 밖에서 생성되고 스타일이 정확하게 지정됩니다. <textarea>.그런 다음 캐럿까지의 텍스트 영역 텍스트가 div에 복사되고 <span> 바로 뒤에 삽입됩니다.그런 다음 가짜 div의 래핑을 충실하게 재현하기 위해 범위의 텍스트 내용이 텍스트 영역의 나머지 텍스트로 설정됩니다.

이는 긴 줄 래핑과 관련된 모든 극단적인 경우를 처리하도록 보장되는 유일한 방법입니다.또한 GitHub에서 해당 위치를 결정하는 데 사용됩니다. @ 사용자 드롭다운.

Answer 2

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

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

• 특정 위치에 일반 삽입 커서
• 특정 경계 영역이있는 텍스트 선택
• 활성화되지 않음 : 텍스트 영역에 포커스가 없습니다. 사용되지 않았습니다.

  IE 모델은 document.selection <개체를 사용합니다. / a>, 여기서 TextRange 객체는 우리에게 선택과 커서 위치에 대한 접근을 제공합니다.

  FF 모델 / Opera는 편리한 변수 [input] .selectionStart 및 selectionEnd를 사용합니다.

  두 모델 모두 일반적인 기본 커서를 너비가 0 인 선택 항목으로 나타내며 왼쪽 경계는 커서 위치입니다.

  입력 필드에 포커스가 없으면 둘 다 설정되어 있지 않을 수 있습니다. 다음 코드를 사용하여 현재 커서 위치에 텍스트를 삽입하고 현재 선택 항목 (있는 경우)도 대체했습니다. 정확한 브라우저에 따라 YMMV. 라코 디스

  버그 참고 : 링크가 상위 단락에서 올바르게 마크 업되지 않았습니다.

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

Answer 3

모든 브라우저에서 할 수있는 것은 아닙니다.누군가 IE6에서 해냈지만 FF 나 Opera (AFAIK)에서는 작동하지 않습니다.모든 브라우저에서 작동하도록 할 수 있습니다.

다음은 블로그 게시물입니다.2005 년 .