Llegar seleccionado la posición del texto

Actualmente estoy recibiendo el texto seleccionado en el explorador de hacer esto:

window.getSelection();

Ahora necesito mostrar un tooltip sobre el texto cuando se pulsa una tecla personalizada(tenga en cuenta que el ratón no podía ser más que el texto ya), así que para hacer eso necesito la posición absoluta de que el texto seleccionado.

Hay una manera de hacer, tal vez de envolver que el texto dentro de una etiqueta y, a continuación, obtener los desplazamientos? Sólo funciona en Chrome, no todos los navegadores.

InformationsquelleAutor Ecarrion | 2011-03-03

3 Kommentare

  1. 15

    La forma más fácil es insertar un marcador temporal elemento en el inicio o final de la selección y obtener su posición. He demostrado cómo hacer esto antes de Desbordamiento de Pila: ¿Cómo puedo posicionar un elemento junto a el usuario la selección de texto?

    • Si se trata de un duplicado de esa pregunta, entonces no deberíamos votar para cerrar? No añadir una respuesta que apunta a otra respuesta?
    • No estoy seguro; las preguntas no son idénticos, pero la técnica necesaria para responder a ellos es la misma. No puedo negar que yo estaba en mi máxima representante de la caza de fase en el momento de responder.
  2. 55
    s = window.getSelection();

    Devuelve una Selección. Así que trate de

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

    oRect será el rectángulo delimitador en el cliente (fija) de coordenadas.

    • El getBoundingClientRect() método de Rango no es universalmente admitidos, por desgracia, aunque para llegar allí. No creo que IE9 tiene, por ejemplo.
    • La pregunta dice, por Chrome solo. Esto funciona en Chrome y FF.
    • oRange … Veo lo que has hecho 🙂
    • Echa un vistazo aquí, el soporte de los navegadores es realmente muy bueno: caniuse.com/#feat=getboundingclientrect
    • El apoyo debe ser de Rango.getBoundingClientRect(), developer.mozilla.org/en-US/docs/Web/API/Range/… , en el enlace que dice acerca de getBoundingClientRect en general.
  3. 0

    Antes de usar getBoundingClientRect, usted necesita saber esta nota:

    CSSOM proyecto de trabajo especifica que devuelve un ClientRect para cada uno de los bordes del cuadro de

    Y por este ‘estándar’:

    Para un elemento en línea, las dos definiciones son las mismas. Pero para un elemento de bloque, Mozilla devolverá un único rectángulo.

    Así que si alguien lee este post quiere una solución general para la más precisa de las posiciones y disposiciones de los textos seleccionados, sugiero los siguientes enfoques:

    Opción 1: Encontrar exacto de partida y el punto final de los textos por la inserción de elementos invisibles. A continuación, calcular la línea seleccionada rectángulos con extraído calcula la altura de la línea y el contenedor de ancho. APIs de uso: de la ventana.getComputedStyle.

    • Pro: el resultado sería más preciso para cada línea de texto.
    • Con: 1) Si la selección es a través de varios nodos con diferentes de la línea de alturas y anchuras, el algoritmo se vuelve complejo. 2) Y que necesita para implementar el algoritmo de cómputo, lo cual es demasiado tiempo cuando la aplicación de una función simple.

    Opción 2: Envuelva cada texto con un cuidado estilo de elemento en línea, la extracción de
    el diseño de cada cuadro, y combinar los resultados en líneas.

    • Pro: Funciona para todos continuas selecciones (que básicamente significa que todos los casos en la corriente de la corriente principal del navegador implementaciones.). Bueno la suficiente precisión para cada línea de textos.
    • Con: 1) Su resultado es un poco impreciso en algunos casos, como agrega error anchos de kerning. 2) Es lento, muy grande selección de textos.

    Para la opción 2, rangeblock es una implementación existente con un sencillo API que le da la absolución de diseño de cada línea de texto:

    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}

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea