很多人可能知道 Element.getBoundingClientRect()，但这个方法是获取已知元素相对页面的偏移位置，所以在这里不能使用这个方法。
其实 Range 也有一个 Range.getBoundingClientRect() 方法，它是获取 Range 相对于页面的偏移位置，又可以根据 Selection 得到 Range，所以问题似乎迎刃而解了。
对于 IE 来说，问题是解决了，因为 IE 有一个叫做 createTextRange 方法，它对于输入框中的选中文本也是有效的。但 Webkit 中却没有这个方法，似乎没有什么完美的方法能解决这个问题。今天要讨论的就是如何在 Chrome ( Webkit ) 中解决这个问题。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86 |
$(function
() { var
getSelectedTextBounding = function
(input, start, end) { var
taBoudRect = input.getBoundingClientRect(); var
div = $(‘<div>‘).html(input.value.replace(/\n/g, ‘<br />‘)).appendTo(document.body); div[0].style.cssText = document.defaultView.getComputedStyle(input, null).cssText; div.css({ position: ‘absolute‘, left: taBoudRect.left, top: taBoudRect.top, margin: 0, overflow: ‘hidden‘ }); div[0].scrollLeft = input.scrollLeft; div[0].scrollTop = input.scrollTop; var
range = setSelectionRange(div[0], start, end); var
textBounding = range.getBoundingClientRect(); div.remove(); return
textBounding; function
getTextNodesIn(node) { var
textNodes = []; if
(node.nodeType == 3) { textNodes.push(node); } else
{ var
children = node.childNodes; for
(var
i = 0, len = children.length; i < len; ++i) { textNodes.push.apply(textNodes, getTextNodesIn(children[i])); } } return
textNodes; } function
setSelectionRange(el, start, end) { var
range = document.createRange(); range.selectNodeContents(el); var
textNodes = getTextNodesIn(el); var
foundStart = false; var
charCount = 0, endCharCount; for
(var
i = 0, textNode; textNode = textNodes[i++];) { endCharCount = charCount + textNode.length; if
(!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i < textNodes.length))) { range.setStart(textNode, start - charCount); foundStart = true; } if
(foundStart && end <= endCharCount) { range.setEnd(textNode, end - charCount); break; } charCount = endCharCount; } var
sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); return
range; } } var
mouseDownedInput = null; $(document).on(‘mousedown‘, ‘:input‘, function
() { mouseDownedInput = this; }); $(document).mouseup(function
(e) { var
sel = window.getSelection(); var
selectedText = sel.toString().trim(); var
boundingClientRect; if
(selectedText) { var
r = sel.getRangeAt(0); if
(r.collapsed) { if
(mouseDownedInput) { var
start = mouseDownedInput.selectionStart; var
end = mouseDownedInput.selectionEnd; boundingClientRect = getSelectedTextBounding(mouseDownedInput, start, end); mouseDownedInput.setSelectionRange(start, end); } } else
{ boundingClientRect = r.getBoundingClientRect(); } } console.log(boundingClientRect) mouseDownedInput = null; }); |
获取输入框中选中文本相对于页面的偏移,布布扣,bubuko.com
原文：http://www.cnblogs.com/huntbao/p/3619247.html