javascript選擇/範圍座標

我想絕對位置文本選擇的初始或終端角落，當用戶拖動鼠標。不幸的是，範圍只提供索引位置，而不是x/y座標。我認爲可能有一種方法可以用range.insertNode做到這一點，但僅限於一方。（這也可能有助於某人在contenteditable下定位一個自動完成框。）javascript選擇/範圍座標

如何獲取文本選擇或文本光標的x/y座標？

來源

2010-01-08 mk.

http://stackoverflow.com/questions/1589721/how-can-i-position-an-element-next-to-user-text-selection – 2010-01-08 23:34:06

大肚，請張貼，作爲一個答案，所以我可以接受它。 – 2010-01-09 04:12:23

工程在鉻/ WebKit的，最後選擇的字母后定位格。通常。

<html><head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
var $div; 
var last; 
function find() { 
    var selection = window.getSelection(); 
    var text = selection.toString(); 
    if (last==text) return; else last=text; // prevent needless computations if no changes to selection 
    if (selection.rangeCount==0) return; 

    var range = selection.getRangeAt(0); 
    var $span= $("<span/>"); 

    newRange = document.createRange(); 
    newRange.setStart(selection.focusNode, range.endOffset); 
    newRange.insertNode($span[0]); // using 'range' here instead of newRange unselects or causes flicker on chrome/webkit 

    var x = $span.offset().left; 
    var y = $span.offset().top; 
    $div.text(x+" "+y); 
    $div.css({left:x,top:y+($div.height())}); 
    $span.remove(); 
} 
$(window).load(function() { 
    $("body").keydown(function(e) { 
     //find(); 
     setTimeout(find,0); 
    }); 
    $("body").mousemove(function(e) { 
     //find(); 
     setTimeout(find,0); 
    }); 
    $div=$("<div style='border:1px solid red;background:white; position:absolute;'>").appendTo($("body")); 
}); 
</script> 
</head> 
<body><p>the quick brown fox</p><ul><li>jumps <i>over</i></li></ul><p>the lazy dog</p></body> 
</html>

來源

2010-01-09 04:58:55

您必須從鼠標移動事件中獲取鼠標位置。然後你可以得到文本輸入元素的位置並進行數學運算（使鼠標位置相對）。

編輯：

Here is a page那裏你可以得到的JavaScript代碼，將獲得以像素爲單位的插入位置。

如果你想使用jQuery，您可以使用this

來源

2010-01-09 00:16:58

這是不正確的，因爲您可以使用鍵盤箭頭移動文本光標（並且如果您保持移位，則更改選擇內容）。 – 2010-01-09 01:52:38

你的意思是，那麼你想根據選擇移動框？他們是否通過鼠標或按鍵來改變選擇？ – 2010-01-09 01:56:52

我的意思是你會得到非常不正確的x/y位置，因爲鼠標光標位置與文本選擇位置無關。這個問題很明顯，我在尋找什麼。用鼠標選擇「你的意思，然後是你」。按住shift鍵。現在按下右箭頭鍵。選擇已經改變，但你不知道。現在，選擇| this text |，然後將鼠標拖到最左側，然後上下移動它。看看選擇如何改變？ – 2010-01-09 04:05:25

javascript選擇/範圍座標

回答

相關問題