Eingabe, die das Schreiben in IMG konvertiert, während Benutzerautorennachricht

Question

Ich versuche, eine Chat-Anwendung zu erstellen, die Emoticons verwendet. Wenn ein Nutzer ein Emoticon-Tag eingibt, möchte ich, dass dieses Tag (I. E.: happy :) automatisch in das Emoticon innerhalb des Eingabefelds konvertiert wird, während der Autor noch an dem Text arbeitet und bevor die Nachricht gesendet wird. Das Emoticon kann ein Bild sein, könnte aber auch ein animiertes Gif sein. Es sollte auch für geparsten Text funktionieren. Wie würde ich darüber gehen? Die einzige Lösung, die ich gefunden habe, schlägt ein div vor, das wie ein Eingabefeld aussieht, wobei das Eingabefeld unsichtbar in ihm entlang gleitet, während der Benutzer den Text schreibt. Aber das scheint unelegant und paßt zu der Pastenanforderung. Jeder Rat würde sehr geschätzt werden!

Answer 1

könnten Sie verwenden das contenteditable Attribut zum Beispiel:

<p contenteditable="true">This is an editable paragraph.</p> 

Sie müssen dann Ihre Conversion-Karte in JavaScript erstellen, hören durch Ihre Karte auf Veränderungen am conrenteditable Elemente und Schleife, die „Codes“ zu ersetzen mit dem gewünschten Unicode oder <img> Tag.

Sehen Sie ein Beispiel here