計算文本選擇的xy位置

我試圖用DOM元素創建自己的文本選擇。是的，我的意思是當你在這個元素中選擇它時，你在文本背後看到的藍色背景。這個想法是停止默認行爲（藍色），並使用我自己的元素來完成這項工作，方法是找到選擇的xy位置，然後放置絕對定位的元素。我希望能夠用普通的div來做到這一點。計算文本選擇的xy位置

我在想我需要3個元素。一個用於頂行（可能不完整），一個用於中間塊，一個用於最後一行（與頂部相同）。以下是幫助你瞭解的圖像： Image showing the needed selection elements

我一直在想追趕mouseup/down，然後mousemove，然後檢查window.getSelection()但到目前爲止，我無法成氣候。

使用CSS ::selection，因爲該元素將不會有重點將無法工作。

我感謝所有幫助，我可以得到！提前致謝。

編輯：偶然發現https://code.google.com/p/rangy/這可能有幫助嗎？任何有此插件經驗的人？

EDIT2：跨瀏覽器支持是必需的。

來源

2013-07-10 Firas Dib

我不確定您可以在不禁用功能的情況下防止文本突出顯示。 ['user-select']]（https://developer.mozilla.org/en-US/docs/Web/CSS/user-select）可以防止某個區域被選中，但這意味着您將無法切割並粘貼。另一個問題是性能。使用javascript渲染突出顯示將比瀏覽器/ os在本地執行時慢得多。 –

@IsaacSuttell：你不能抓住'onselect'並阻止默認操作嗎？我會這樣想的。但是，這可能會殺死'window.getSelection（）'功能。我不認爲會有大規模的表現，只有三個要素。 Codemirror似乎處理得很好，但我不知道如何。 –

我相信['onselect'僅限於表單標籤]（http://www.w3schools.com/jsref/event_onselect.asp）。 –

您可以使用getClientRnge：

var element = document.getElementById('element') 

element.onmouseup = function(){ 
    var selection = document.getSelection(), 
     range  = selection.getRangeAt(0), 
     clientRects = range.getClientRects() 

    console.log(clientRects) 
}

http://jsfiddle.net/XjHtG/

這將返回左，右，上，下，寬度和完成所有選擇的高度。

來源

2013-07-10 11:30:41 Mircea

酷！任何想法如何可以停止默認行爲？任何IE支持可能？ –

您可以使用event.preventDefault，但不會有選擇獲取X/Y。只要隱藏它::選擇http://jsfiddle.net/XjHtG/2/ – Mircea

我想我是在正確的軌道上。儘管如此，IE-suupport是其中之一。繼承人到目前爲止：http://jsfiddle.net/XjHtG/7/。我的方法（由圖片描述）是一種作品，除非你從任何地方選擇說'I'm'（最右邊，從底部開始第三行）。也不太清楚如何支持使用鍵盤進行的選擇。 –

計算文本選擇的xy位置

回答

相關問題