Wie kann ich mit jQuery das vorherige, aktuelle und nächste Wort in ein Tag einschließen?

Nicht sicher, ob der Titel gut gewählt ist ...

Ich versuche, die Textauswahl in HTML / JS / CSS zu simulieren, um die Aktionsblase auf dem Mobilgerät loszuwerden, wenn Sie wirklich Texte auswählen.

Um genauer zu sein, versuche ich dies zu vermeiden:

Das visuelle:

Ich habe es so erstellt, und es kann sich ändern, weil es keine Rolle spieltspan.selection In diesem Tag werden auch zwei Carets als Handler verwendet:

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 -->

Im Idealfall würde es Spaß machen, mehr oder weniger Texte per Drag-and-Drop auszuwählen, aber ich glaube, das wäre verdammt schwierig, und in diesem Fall können Sie mit einem Klick auf die Carets entweder das vorherige oder das folgende Wort auswählen und wickeln Sie es in die.selection wäre nicht so schlimm.

Hier ist die Jsfiddle:http://jsfiddle.net/m6Qx4/

Der umgebende Text kann auch HTML-Tags enthalten, wie zum Beispiel:<i>, <b>, <span> und<ul>/<li> kann vorhanden sein, was das Parsen erschwert.

Irgendwelche Ideen, wie das gemacht werden kann?

Status-Update:

Ich habe es tatsächlich geschafft, damit zu arbeiten.click(); Ereignis-Listener mit meinen benutzerdefinierten jQuery-Methoden.

Irgendwann werde ich die Klickereignisse durch jQuery UI ersetzen, das durch Ziehen ausgewählt werden kann, um umgebende Wörter auszuwählen, sofern dies für Mobilgeräte geeignet ist.

Mein aktueller Fehler besteht in der Verschiebung der roten Carets. Ich habe versucht, sie zu zerstören und anzufügen, und es funktioniert immer noch nicht. Möglicherweise liegt ein Fehler in Firefox vor, durch den das DOM nach Änderungen an Textknoten nicht ordnungsgemäß neu geladen werden kann.

Referenz: jsFiddle

Betriebszustand von prüfenjsFiddle.net Aufgrund der jüngsten Ausfälle, besuchen Sie ihreTweets.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage