入門選擇文本位置

目前一我就要在瀏覽器中選中的文本這樣做：入門選擇文本位置

window.getSelection();

現在我需要顯示的文本上的工具提示按下一個自定義鍵時（注意，鼠標可能不再是文字），所以爲了做到這一點，我需要選定文本的絕對位置。

有沒有辦法做到這一點，也許包裝在一個標籤內的文本，然後得到補償？

任何想法？

PS：必須從Chrome瀏覽器，而不是所有的瀏覽器。

PS2：對不起，我蹩腳的英語。

來源

2011-03-03 Ecarrion

的可能重複[我怎樣才能位置，旁邊是用戶的元素文本選擇？]（https://stackoverflow.com/questions/1589721/how-can-i-position-an-element-next-to-user-text-selection） – Liam 2017-05-24 07:52:15

最簡單的方法是在選擇的開始或結束處插入臨時標記元素並獲取其位置。我已經演示瞭如何在堆棧溢出之前執行此操作：How can I position an element next to user text selection?

來源

2011-03-06 12:28:21

如果這是一個重複的問題，那麼應該你投票結束了嗎？不添加指向另一個答案的答案？ – Liam 2017-05-24 07:53:54

@李安：我不確定;問題並不完全相同，但回答這些問題所需的技巧是一樣的。我不能否認在回答的時候我處於我最大的代表狩獵階段。 – 2017-05-24 13:36:29

s = window.getSelection();

返回選擇。所以請嘗試

s = window.getSelection(); 
oRange = s.getRangeAt(0); //get the text range 
oRect = oRange.getBoundingClientRect();

oRect將是客戶端（固定）座標中的邊界矩形。

來源

2013-07-26 17:42:36 Jerinaw

不幸的是，Range的'getBoundingClientRect（）'方法並沒有得到普遍支持，儘管它到了那裏。例如，我不認爲IE9有它。 – 2013-07-26 22:17:41

這個問題只針對Chrome。這適用於Chrome和FF。 – Jerinaw 2013-08-04 00:32:36

'oRange' ...我看到你在那裏做了什麼:) – volter9 2015-07-30 04:01:46

使用getBoundingClientRect之前，你需要知道this note：

CSSOM工作草案規定，它返回一個ClientRect每個邊界框

而且通過這種 '標準'：

對於內聯元素，這兩個定義是相同的。但是對於塊元素，Mozilla將只返回一個矩形。

因此，如果任何人閱讀這篇文章希望進行更精確的位置和所選文本的佈局，一般的解決辦法，我建議以下方法：

選項1：找到確切的開始，和結束文本點通過inserting invisible elements。然後使用提取的計算出的線高和容器寬度計算選定的線矩形。正在使用的API：window.getComputedStyle。

Pro：結果對每行文本都是最精確的。
Con：1）如果選擇跨越具有不同線高和寬度的多個節點，則算法變得複雜。 2）你需要實現計算算法，這在實現一個簡單的功能時過於耗時。

選項2：環繞每個文本具有精心設計，內聯元件，提取佈局每個盒子的，和結果合併到線路。

Pro：適用於所有連續選擇（基本上意味着當前主流瀏覽器實現中的所有情況）。對每一行文本都有足夠的精度。
Con：1）在某些情況下，其結果有點不準確，因爲它增加了錯誤寬度kerning。 2）文本的選擇很慢。

對於選項2，rangeblock是一個簡單的API現有的實現，讓你的每行文本的赦免佈局：

let block = rangeblock.extractSelectedBlock(window, document); 
console.info("Text layout: " + JSON.stringify(block.dimensions)); 
// output: Text layout: {Left: 100, Top: 90, Width: 200, Height: 50}

來源

2017-04-23 22:50:21 lowatt

入門選擇文本位置

回答

相關問題