Создание поддельного текстового поля

Для проекта, над которым я работаю, мне нужно иметь возможность показывать "div" "перед текстовым содержимым текстового поля:

Сначала я подумал, что могу просто разместить блоки div с абсолютным позиционированием и z-индексом, но это повлечет за собой" проталкивание "текста и обеспечение того, чтобы пользователь не мог удалить эти первые пробелы, ни с Backspace, ни ctrl + c, ни ctrl + x, ни с удалением ... Было сложно найти все возможные пути.

Теперь я пытаюсь использовать «div», который выглядит как текстовое поле, которое содержит редактируемый «диапазон», который будет содержать текст:

Это работает на данный момент, но это не идеально, особенно с точки зрения: focus (щелчок в любом месте внешнего div должен отображать курсор в текстовом диапазоне *), и кажется, что он сломается, если я опустошу текстовый диапазон.

Есть идеи, как это исправить? Я открыт для предложений, даже если мне придется изменить структуру моего поддельного текстового поля.

Он должен работать во всех основных (недавних) браузерах и может использовать jQuery.

• $ ('# outerDiv'). Bind ('click', $ ('# outerDiv span.text'). Focus ()); , похоже, работает в Chrome, но не в firefox.