Erstellen einer gefälschten Textfläche

Für ein Projekt, an dem ich gerade arbeite, muss ich "divs" vor dem Textinhalt einer Textfläche anzeigen können:

Zuerst dachte ich, ich könnte einfach die divs mit absoluter Positionierung und Z-Index platzieren, aber das würde bedeuten, dass man den Text "pushen" müsste und sicherstellen sollte, dass der Benutzer diese ersten Leerzeichen nicht löschen kann, weder mit Rücktaste noch Strg + c noch ctrl + x noch löschen ... Es sah kompliziert aus, jeden möglichen Weg zu bekommen.

Nun versuche ich ein "div" zu verwenden, das so aussieht, als wäre es ein Textfeld, das ein editierbares "span" enthält, das den folgenden Text enthält:

Das funktioniert im Moment, aber es ist nicht perfekt, insbesondere in Bezug auf: Fokus (Klicken Sie irgendwo auf das äußere div sollte den Cursor in der Textspanne *) anzeigen, und es scheint zu brechen, wenn ich die Textspanne entleere.

Irgendwelche Ideen, wie Sie das beheben können? Ich bin offen für Vorschläge, auch wenn ich die Struktur meiner gefälschten Textarea ändern muss.

Es sollte in allen wichtigen (aktuellen) Browsern funktionieren und kann jQuery verwenden.

• $('#outerDiv').bind('click', $('#outerDiv span.text').focus()); scheint in Chrome zu funktionieren, aber nicht in Firefox.