Creating a fake textarea

Question

For a project I'm working on, I need to be able to show "divs" before the text contents of a textarea :

At first I thought I could just place the divs with absolute positioning and z-index, but that would entail "pushing" the text, and making sure that the user can't remove those first spaces, not with backspace nor ctrl+c nor ctrl+x nor delete ... It looked complicated to get every possible way.

Now, I'm trying to use a "div" made to look like a textarea, which contains an editable "span" that will contain the text :

That works for the moment, but it's not perfect, especially in terms of :focus (clicking anywhere on the outer div should display the cursor in the text span*), and it seems to break if I empty the text span.

Any ideas on how to fix this ? I'm open to suggestions, even if I have to change the structure of my fake textarea.

It should work on all major (recent) browsers, and can use jQuery.

• $('#outerDiv').bind('click', $('#outerDiv span.text').focus()); seems to work in Chrome but not in firefox.

Answer 1

What I'd do is the following:

1. Your containing element (the text editor) should be a block level element. It is not editable.
2. Your tags should consist of the following: A container that floats to the left and inline-block or floated children.
3. A non-floated block (important) level element that is contenteditable.

End result:

<div>
  <!-- The list of tags -->
  <ul style="float:left"> 
    <li style="float:left">...</li>
    <li style="float:left">...</li>
    <li style="float:left">...</li>
  </ul>
  <!-- This will contain your text: -->
  <div contenteditable="true">...</div>
</div>

If you have a lot of tags, they'll wrap to the next line. Text in the editable element will wrap around the tags as well.

Clicking the tags would not give the editable element focus, but you can remedy that with JavaScript.

Here's an example I whipped up. Works in Safari/Chrome/Firefox. Have not tested Internet Explorer, but it should work fine.