¿Cómo soportar múltiples selecciones de texto en el navegador?

Question

Estoy construyendo una herramienta de anotación basada en la web, donde los usuarios finales pueden seleccionar y anotar una sección de texto de un documento HTML. Hablando de forma programática, acceder y trabajar con el texto seleccionado y el rango correspondiente es sencillo usando "window.getSelection" y "getRangeAt".

Me encuentro con un problema, sin embargo, cuando trato de poner todo esto junto en una aplicación de navegador cruzado. Todo funciona en Firefox, pero en Safari noté inmediatamente que cuando hago clic en un botón HTML (es decir, el botón "anotación"), la selección actual del texto del usuario desaparece, como si al hacer clic en el botón se cambiara el texto del cursor. Mi código que intenta acceder a window.getSelection se ejecuta desde una secuencia de comandos en este botón, que luego informa que no existe selección.

Investigué cómo Google Docs, específicamente su aplicación de procesamiento de textos maneja esto, ya que esencialmente el comportamiento y la mecánica de seleccionar texto y hacer clic en "Negrita" o "Cambiar fuente" corresponde a mi función de anotación. En Google Docs, cargan el texto del documento para editarlo en un iframe. Jugando con esto, aprendí que Firefox out-of-the-box admite múltiples rangos de selección en una página web que contiene múltiples marcos, o iframes. En otras palabras, puedo seleccionar una sección de texto en la página base, y una sección separada de texto en el iframe sin que la primera selección desaparezca. Esta solución de Google Docs funciona tanto para Firefox como para Safari (los dos navegadores que me interesan). Pero cuando construí una página de ejemplo simple para probar esta solución, no funcionaría en Safari. Tan pronto como hago clic en un botón o selecciono texto en la página raíz (fuera del iframe) el texto seleccionado del iframe actual desaparece.

¿Alguien sabe lo que me falta aquí para que esto funcione? ¿O tiene una sugerencia sobre otra forma de hacer que esto funcione?

Answer 1

supe que Firefox fuera de la caja es compatible con varios rangos de selección en una página web que contiene varios marcos

Infierno, Firefox también soporta múltiples selecciones en un solo cuadro! (Trate de hacer clic y arrastrar a continuación, ctrl-clic y arrastrar en una pieza separada del texto.)

en Safari me di cuenta inmediatamente de que cuando hago clic en un botón HTML la selección de texto de usuario actual se va, como si al hacer clic en el botón reposicionó el texto caret

Funciona para mí, en Safari 3.2.1 en Windows. Al hacer clic en un botón <>, < ingrese type = "button"> o < a> deja la selección donde está, aunque esté atenuada si está en un marco diferente. 'Window.getSelection()' continúa funcionando como siempre.

¿Puedes publicar un caso de prueba y qué versión de Safari hace que se porte mal?

Answer 2

Enganche su controlador de eventos al evento mousedown del botón (en lugar del evento click o mouseup). Esto le permitirá tomar la selección actual antes de borrarla.

Puede mantener la experiencia del usuario almacenando la selección en una variable y solo usándola si su botón recibe un evento de clic. De esta manera:

<button onmousedown="sel = window.getSelection()" onclick="alert(sel)">What's the selection?</button> 

Answer 3

De la parte superior de mi cabeza, creo que la solución más fácil sería conectar un controlador de eventos para la selección de texto y guardar la selección actual a una memoria intermedia, de esta manera usted no tiene que preocuparse sobre el tiempo

Abran incendiario en esta página y ejecute el siguiente fragmento:

var buffer = ''; 
$('p').mouseup(function() { 
    buffer = window.getSelection(); 
}); 

entonces usted puede seleccionar lo que quieras y ver el último texto seleccionado ejecutando:

console.log(buffer); 

Voila, haga clic/anule la selección del problema de tiempo resuelto :)