텍스트 영역 내에 중첩 된 범위의 위치를 ​​얻는 방법

Question

텍스트 영역 내에 중첩 된 범위가 있고이 범위의 문서에 대한 오프셋을 가져 오려고합니다. Zero는 항상 왼쪽 위를 향해 반환되며, 이유는 확실하지 않습니다. 여기

는 스팬의 위치가 텍스트 영역을 기준으로 제로가 될 왜 다음 코드를 jsFiddle 내가 볼

$(document).ready(function(){ 
    $("#textarea1").html("1234 <span id='span1' style='color:red'>5678</span>"); 
    var offset = $("#span1").offset(); 
    alert("span1 left: " + offset.left + " top: " + offset.top); 
}); 

데모하는 것입니다. 그러나 왜 오프셋이 0을 반환하는지 이해할 수 없습니다. 누군가 내가 여기에서 나를 도울 수 있다면 나는 그것을 고맙게 생각할 것입니다.

---

편집 : 목표는 클릭했을 때 스팬보다 높은 곳에 배치하는 것이 었습니다. 위에서 언급 한 스팬의 오프셋을 얻을 수 없기 때문에 대신 마우스 좌표를 사용하기로 결정했습니다. 그것은 단순히 텍스트 영역의 value 속성에 포함되어 있기 때문에

$("#id").dblclick(function(e){ 
alert("X: " + e.pageX + " Y: " + e.pageY); 
}); 

Answer 1

DOM은이 span 인식하지 못합니다.

페이지의 x, y 좌표를 계산하려면 텍스트 영역의 문자/행을 따라 커서를 배치 할 대략적인 위치를 계산해야합니다. 자유로운 텍스트에서 줄 바꿈을 계산하기 때문에 (특히 단색 글꼴을 사용하지 않는 경우가 많기 때문에) 이는 간단한 작업이 아닙니다.