javascript - img - title html
Coordenadas del texto seleccionado en la página del navegador (2)
Necesito las coordenadas en píxeles del comienzo de la selección de texto (en cualquier lugar de la página, no en un área de texto).
Intenté usar las coordenadas del cursor, pero esto no funcionó del todo bien porque las coordenadas del cursor y el comienzo de la selección no son siempre los mismos (por ejemplo, cuando un usuario arrastra un texto).
¡Espero que alguien tenga la solución!
La respuesta anterior de TimDown no funciona si el símbolo de intercalación está en un elemento vacío.
El siguiente código resuelve el problema. Observe cómo es casi idéntico a la solución de TimDown, excepto que este código verifica que range.getClientRects() tenga una length>0 antes de llamar a 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 };
}
En IE> = 9 y navegadores no IE (Firefox 4+, navegadores WebKit lanzados desde principios de 2009, Opera 11, quizás antes), puede usar el método getClientRects() de Range . En IE 4 - 10, puede usar las propiedades boundingLeft y boundingTop del TextRange que se pueden extraer de la selección. Aquí hay una función que hará lo que quieras en los navegadores recientes.
Tenga en cuenta que hay algunas situaciones en las que puede obtener erróneamente las coordenadas 0, 0 , como se menciona en los comentarios de @Louis. En ese caso, tendrá que recurrir a una solución temporal de insertar temporalmente un elemento y obtener su posición.
jsFiddle: http://jsfiddle.net/NFJ9r/132/
Código:
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 };
}
ACTUALIZAR
Envié un error de WebKit como resultado de los comentarios, y ahora se ha solucionado.