Wie kann ich den Namen eines Freundes in der Facebook-Status-Update-Box (Textarea) hervorheben?
Wenn ich in der Facebook-Statusaktualisierung @ tippe und anfange zu tippen und einen Namen wähle, sagen Steven Gerrard, von der von fb vorgeschlagenen Freundesliste, wird der Name meines Freundes im Textfeld wie folgt hervorgehoben
Ich habe es mit Firebug überprüft und es gibt nur
- ein div.highlighter, der eine Art formatierten Text enthält (Steven Gerrard ist innerhalb von b Tags)
- ein Textfeld in einem div.uiTypeahead. Nichts Interessantes, das ich finden könnte
- und eine versteckte Eingabe, die den eigentlichen Text enthält, der gepostet wird: @ [100001915747xxx: Steven Gerrard] ist genial
Was ist der geheime Trick dahinter? Normale Rich-Text-Editoren wie ckeditor haben normalerweise einen IFrame, um den Text anzuzeigen, und einen eigentlichen Textbereich, um den ursprünglichen Inhalt beizubehalten. Aber in diesem Fall sehe ich nichts. Irgendjemand bitte Licht?
Ich möchte so etwas machen, habe aber keine Ahnung, wo ich anfangen soll. Auch wenn ich neben dem Namen meines Freundes einen kleinen Daumen zeigen möchte, ist das überhaupt möglich?
3 Antworten
So funktioniert es:
- Sie überlagern die Textfläche (vorne) und ein div (hinter), die die gleiche Größe und die gleiche Schriftgröße haben.
- Der Textbereich muss einen transparenten Hintergrund haben, damit wir seinen Text sehen können, aber auch das dahinter liegende div.
- Das dahinter liegende div wird einen weißen Text und einen weißen Hintergrund haben, so dass der darin enthaltene Text transparent ist.
- Sie legen einen Haken für die Tastenkombination des Textbereichs fest und verarbeiten den darin enthaltenen Text als HTML: Ersetzen Sie die Zeilenumbrüche durch & lt; br / & gt; , ersetzen Sie die doppelten Leerzeichen durch & amp; ; nbsp; & amp; nbsp; und ersetzen Sie auch alle Wörter, die Sie mit einer Version markieren möchten, die von & lt; span style="background-color: # D8DFEA;" & gt; & lt; / span & gt; .
- Da Sie das Highlight div hinter dem Textfeld sehen können, und dass der Text, den das highlight div enthält, perfekt auf den Text im textarea ausgerichtet ist und dass & lt; span & gt; ist sichtbar, Sie werden die Illusion haben, dass der Text im Textfeld hervorgehoben ist.
Ich habe ein schnelles Beispiel basierend auf jquery geschrieben, damit Sie es selbst ausprobieren können, ohne zu viel Code zu analysieren.
Hier ist ein Beispielcode, den Sie einfach kopieren, einfügen und speichern können:
Dieser Beispielcode hebt eine definierte Menge von Wörtern hervor, hier: "Hallo" und "Welt".
Ich werde es Ihnen anpassen lassen, wie Sie wollen.
%Vor%Lassen Sie es mich wissen, wenn Sie Fragen haben oder Hilfe bei diesem Code benötigen.
Nachdem ich den Weg von Facebook überprüft habe, sehe ich, dass der auf dem Bildschirm angezeigte Text:
ist %Vor%Dieser Bereich wird in eine Tabelle (mit vielen div-Containern) eingefügt, die entsprechend formatiert ist.
Also ich denke, das ist der Prozess:
-
Wenn Sie das Feld eingeben, hat Facebook eine Textfläche, die erfasst, was Sie eingeben, aber Javascript verwenden, um den typisierten HTML-Inhalt in einer Tabelle anzuzeigen.
-
Beim Absenden wird der formatierte Inhalt in einer versteckten Eingabe (die Sie bereits in der Frage gefunden haben) gesendet. Es ist wie "@ [100001915747xxx: Steven Gerrard] ist super".
-
Wenn die formatierte Nachricht gesendet wird, wird sie in der Datenbank gespeichert. Jedes Mal, wenn die Seite geladen wird, wird aus der gespeicherten Nachricht der HTML-Code zusammengesetzt und zurückgegeben.
Um einen ähnlichen Effekt zu erzielen, können Sie jedes jQuery-Autocomplete-Plugin .
Tags und Links facebook textarea rich-text-editor