javascript document.getSelecttion()을 사용하여 html로 선택한 텍스트의 좌표를 얻는 방법

Question

선택한 텍스트 위에 요소를 배치하고 싶습니다. 그러나 나는 좌표를 알아낼 수 없다.

var sel = document.getSelection(); 
    if(sel != null) { 
    positionDiv(); 
} 

예 (이미지) 여기서

alt text http://www.freeimagehosting.net/uploads/bf4035f29f.png

Answer 1

기본적인 아이디어이다. 선택 영역의 처음에 더미 요소를 삽입하고 그 더미 html 요소의 좌표를 가져옵니다. 그런 다음 제거합니다.

var range = window.getSelection().getRangeAt(0); 
var dummy = document.createElement("span"); 
range.insertNode(dummy); 
var box = document.getBoxObjectFor(dummy); 
var x = box.x, y = box.y; 
dummy.parentNode.removeChild(dummy);