Erwähnen System, das Facebooks

Question

nachahmt Ich hatte ein schreckliches Problem, das ich mir in den letzten zwei Tagen für mein Gehirn zerbrochen habe, und habe noch eine Lösung zu finden. Daher denke ich, dass dies jemanden braucht, der klüger ist als ich.

Was ich versuche zu bauen, ist eine Textbox, die die von Facebook simuliert; im Wesentlichen die Markierungsfunktion.

Jetzt, wenn Sie Facebook verwendet haben, haben Sie bemerkt, dass Facebook Tag Menschen in einem Kommentar/Post ermöglicht, einfach durch Eingabe ihres Namens und Auswahl aus einer Dropdown-Liste. Der Name der Person, die Sie ausgewählt haben, wird dann im hervorgehobenen Text in diesem Textbereich angezeigt. Es ist mir gelungen, die Dropdown-Liste eine Kombination aus JQuery und AJAX zu erstellen und zu füllen, aber der Tagging-Prozess selbst ist der Stumper.

Sobald ein Dropdown-Element ausgewählt wurde (durch Eingabe oder Anklicken), wird der Abfragetext durch den markierten Namen ersetzt. Jetzt ist es schwierig zu sehen, wie man Text in einem Textfeld als Highlight markieren kann. Ich habe entdeckt (indem ich Elemente in Google Chrome untersuchte und den Textarea-Knoten löschte), dass das Textfeld selbst transparent ist und es ein Weiß gibt div unterhalb "simuliert" den Text. Hervorgehobene Wörter werden in einem Tag mit benutzerdefiniertem CSS platziert, das diesen blauen Hintergrund erhält. All das habe ich selbst herausgefunden, und ich habe das erfolgreich simuliert - aber ich kann nur ein Tag machen.

Jetzt habe ich weiter untersucht und fand ein Eingabetyp = "verstecktes" Element der Klasse "mentionsHidden". Dieses Eingabeelement hat ein Wertattribut, das sich basierend auf dem Inhalt des Textbereichs dynamisch auffüllt. Wenn ich also "ABC" eintippte, wird der Wert des Elements "ABC". Wenn ich ein Tag hinzugefügt habe, sag "hi [Rei]!" (wo der Name in [] das Tag ist), wird der Wert des Elements "hi @ [member_id: Rei]!".

Also habe ich meine Hausaufgaben gemacht. Aber hier kommt der Teil, den ich nicht verstehen kann.

Ich kann nicht herausfinden, wie das versteckte Eingabeelement mit dem Wert des Textfelds dynamisch gefüllt wird. Es ist offensichtlich, dass das zugrundeliegende div, das den blauen Tag-Hintergrund angibt, vom Eingabeelement ausgefüllt wird. Aber das Eingabeelement bereitet mir Kopfschmerzen.

Sie sehen, ich kann folgendes nicht tun:

-I kann nicht einfach „Kopie“ der gesamte Wert des aktuellen Textfeld und „Einfügen“ es in den Wert des Eingabeelement, weil das außer Kraft setzen würde alle zuvor markierten Personen im Eingabeelement (schließlich kann das Textfeld nur Klartext enthalten).

- Auch wenn ich den aktuellen Index des Caret finden kann (die blinkende schwarze Linie im Textfeld, die Ihnen sagt, wo Sie tippen werden), das ist nur für den Textbereich. Die Indexposition 10 in der Textarea und im Wert des Eingabeelements kann unterschiedlich sein, da diese Art des "taggens" von Personen dazu führt, dass dem Wert String zusätzliche Zeichen hinzugefügt werden.

-Ich kann nicht einfach ein "Ersetzen" des Textes, den ich ersetzen möchte, weil es andere Instanzen desselben Textes in anderen Teilen des Wertes String geben kann.

Ich weiß, es ist eine sehr lange und verwirrende Post, aber ich hoffe, Sie bekommen, was ich meine. Ich brauche wirklich eine Lösung, und ich möchte nicht contenteditable verwenden, weil es nur für HTML5 ist und einige ältere Browser es möglicherweise nicht unterstützen.

Mit freundlichen Grüßen Rei

Answer 1

Ich hoffe, Sie zu kommen mit der Lage waren, oder finden eine Lösung für Ihr Problem.Da es hier anscheinend keinen gibt, möchte ich einen für jeden anbieten, der darüber stolpern könnte (genauso wie Sie, wenn meine Annahme falsch war).

Sie müssen explizite Standortdaten von jeder vorhandenen Erwähnung in der textarea in der Reihenfolge, in der sie erscheinen, pflegen. Wenn nach einer Änderung des Inhalts in textarea die Position einer Erwähnung darin geändert wird, müssen Sie bestimmen, welches Aussehen des Werts, falls vorhanden, verwendet wird, um es darzustellen, und die Standortdaten des erwähnen.

Mit einer solchen Sammlung von Daten wird es trivial, den Wert mentionsHidden zu konstruieren, obwohl die Existenz solcher Daten das Element unnötig macht.

Mentionator ist eine bestehende, robuste Lösung, die diesen Ansatz bei der Bereitstellung der Funktionalität verwendet, die Sie versuchen, neu zu erstellen. Wenn man bedenkt, dass es gut strukturiert, leicht zu verstehen und ausführlich kommentiert ist, sollte es für Sie als Out-of-the-Box-Lösung oder Referenzmaterial von Nutzen sein, wenn Sie es selbst erstellen. Es wird von mir ehrlich gepflegt :).