题目:计算下图所示输入框中的选中文本相对于页面的偏移位置:
首先思考如何获取页面上选中文本相对页面的偏移位置。
很多人可能知道 Element.getBoundingClientRect(),但这个方法是获取已知元素相对页面的偏移位置,所以在这里不能使用这个方法。
其实 Range 也有一个 Range.getBoundingClientRect() 方法,它是获取 Range 相对于页面的偏移位置,又可以根据 Selection 得到 Range,所以问题似乎迎刃而解了。
对于 IE 来说,问题是解决了,因为 IE 有一个叫做 createTextRange 方法,它对于输入框中的选中文本也是有效的。但 Webkit 中却没有这个方法,似乎没有什么完美的方法能解决这个问题。今天要讨论的就是如何在 Chrome ( Webkit ) 中解决这个问题。
解决的思路如下:
- 使用 div 克隆输入框,即使 div 看上去和输入框如出一辙:边框、字体、颜色、内容等。
- 根据输入框的 selectionStart 和 selectionEnd 值,选中 div 中对应的内容。
- 获取 Selection 得到 Range,再使用 Range.getBoundingClientRect() 方法获取偏移值。
- 删除 div 元素,根据之前保存的输入框的 selectionStart 和 selectionEnd 值,选中输入框之前选中的文本。
代码实现如下:
$(function () {
var getSelectedTextBounding = function (input, start, end) {
var inputBoudRect = 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: inputBoudRect.left,
top: inputBoudRect.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, textarea', 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;
});
说明
- 代码默认使用 jQuery 库。
- 上面的代码并没完美地解决问题,主要是使用 div 模拟 textarea (或者input)时会遇到一些问题,比如 textarea 中的换行,div 中需要转换成 <br> 标签,这期间会丢失精度(当然也可以多写些代码解决这个精度问题,但这里不再讨论)。
- 其他的都是一些细节问题,也有可能没有测试到,有遗漏也在所难免。若有问题,欢迎给我留言,非常感谢。
- 这段代码已经用在了我开发的 Chrome 扩展中,欢迎使用:饥猪阅读,github地址:https://github.com/huntbao/piggyreader
参考资料