No estoy seguro si el título está bien elegido ...

Estoy tratando de simular la selección de texto en HTML / JS / CSS para deshacerme de la burbuja de acción en el dispositivo móvil cuando selecciono textos de verdad.

Para ser más específicos, estoy tratando de evitar esto:

Lo visual:

La forma en que lo construí y puede cambiar porque no importa, es que el texto seleccionado se ajusta dentro de unspan.selection y dentro de esa etiqueta, también hay dos caracteres utilizados como manejadores:

Lorem ipsum dolor                            <!-- Unselected Text -->

<span class="selection">                     <!-- Start selection wrapper -->

  <span rel="previous" class="caret"></span> <!-- The left-side caret -->

  sit amet, consectetur                      <!-- The selected texts -->

  <span rel="next" class="caret"></span>     <!-- The right-side caret -->

</span>                                      <!-- End selection wrapper -->

adipiscing elit.                             <!-- Unselected Text -->

Idealmente, sería divertido usar un método de arrastrar y soltar para seleccionar más o menos textos, pero creo que esto sería muy difícil de hacer y, en ese caso, tal vez usar el cursor para seleccionar la palabra anterior o la siguiente y envolverlo dentro de la.selection no seria tan malo

Aquí está el jsfiddle:http://jsfiddle.net/m6Qx4/

Los textos circundantes pueden contener etiquetas HTML también como:<i>, <b>, <span> y<ul>/<li> Puede estar presente haciendo el análisis más difícil.

¿Alguna idea de cómo se puede hacer esto?

Actualización de estado:

En realidad he logrado hacer que funcione.click(); escucha de eventos usando mis métodos jQuery personalizados.

Eventualmente, reemplazaré los eventos de clic con jQuery UI que se puede arrastrar para seleccionar las palabras circundantes siempre que sea utilizable para dispositivos móviles.

Mi error actual consiste en la reposición de los caretes rojos. He intentado destruirlos y añadirlos / agregarlos de nuevo y todavía no funciona. ¿Podría ser un error con Firefox que no pueda volver a cargar el DOM correctamente después de los cambios realizados en los nodos de texto?

Referencia: jsFiddle

Para comprobar las condiciones de funcionamiento dejsfiddle.net Debido a recientes cortes, visite susTweets.