Мне нужны координаты в пикселях начала выбора текста (в любом месте страницы, а не в текстовом поле).
Я попытался использовать координаты курсора, но это не сработало, потому что координаты курсора и начало выбора не всегда одинаковы (например, когда пользователь перетягивает текст).
Я надеюсь, что у кого-то есть решение!
В IE >= 9 и не-IE-браузерах (Firefox 4+, браузеры WebKit, выпущенные с начала 2009 года, Opera 11, возможно, раньше), вы можете использовать getClientRects() метода Range. В IE 4-10 вы можете использовать свойства boundingLeft и boundingTop TextRange, которые можно извлечь из выделения. Здесь функция, которая будет делать то, что вы хотите в последних браузерах.
Обратите внимание, что есть некоторые ситуации, в которых вы можете ошибочно получить координаты 0, 0, как указано в комментариях @Louis. В этом случае вам придется вернуться к обходному пути временного вставки элемента и получения его позиции.
jsFiddle: http://jsfiddle.net/NFJ9r/132/
код:
function getSelectionCoords(win) {
win = win || window;
var doc = win.document;
var sel = doc.selection, range, rects, rect;
var x = 0, y = 0;
if (sel) {
if (sel.type != "Control") {
range = sel.createRange();
range.collapse(true);
x = range.boundingLeft;
y = range.boundingTop;
}
} else if (win.getSelection) {
sel = win.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0).cloneRange();
if (range.getClientRects) {
range.collapse(true);
rects = range.getClientRects();
if (rects.length > 0) {
rect = rects[0];
}
x = rect.left;
y = rect.top;
}
// Fall back to inserting a temporary element
if (x == 0 && y == 0) {
var span = doc.createElement("span");
if (span.getClientRects) {
// Ensure span has dimensions and position by
// adding a zero-width space character
span.appendChild( doc.createTextNode("\u200b") );
range.insertNode(span);
rect = span.getClientRects()[0];
x = rect.left;
y = rect.top;
var spanParent = span.parentNode;
spanParent.removeChild(span);
// Glue any broken text nodes back together
spanParent.normalize();
}
}
}
}
return { x: x, y: y };
}
UPDATE
Я отправил ошибку WebKit в результате комментариев, и теперь она исправлена.
Вышеупомянутый ответ TimDown не работает, если каретка находится в пустом элементе.
Приведенный ниже код решает проблему. Обратите внимание, что он почти идентичен решению TimDown, за исключением того, что этот код проверяет массив range.getClientRects() length>0 перед вызовом range.getClientRects()[0]
function getSelectionCoords() {
var sel = document.selection, range, rect;
var x = 0, y = 0;
if (sel) {
if (sel.type != "Control") {
range = sel.createRange();
range.collapse(true);
x = range.boundingLeft;
y = range.boundingTop;
}
} else if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0).cloneRange();
if (range.getClientRects) {
range.collapse(true);
if (range.getClientRects().length>0){
rect = range.getClientRects()[0];
x = rect.left;
y = rect.top;
}
}
// Fall back to inserting a temporary element
if (x == 0 && y == 0) {
var span = document.createElement("span");
if (span.getClientRects) {
// Ensure span has dimensions and position by
// adding a zero-width space character
span.appendChild( document.createTextNode("\u200b") );
range.insertNode(span);
rect = span.getClientRects()[0];
x = rect.left;
y = rect.top;
var spanParent = span.parentNode;
spanParent.removeChild(span);
// Glue any broken text nodes back together
spanParent.normalize();
}
}
}
}
return { x: x, y: y };
}