Create a fake text area

Question

For the project I'm working on, I need to show the "divs" in front of the text content of the text field:

At first I thought I could just put a div with absolute positioning and z-index, but that would entail “pushing” the text and ensuring that the user cannot remove these first spaces, not with backspace or ctrl + c, nor ctrl + x, nor delete ... It seemed like it was hard to do.

Now I'm trying to use a "div" to make it look like a text box containing an editable "range" that will contain text:

This works at the moment, but it is not ideal, especially from the point of view: focus (clicking anywhere on the external div should display the cursor in the text range *), and it seems to break if I omit the text.

Any ideas on how to fix this? I am open to suggestions, even if I need to change the structure of my fake text box.

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

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

Answer 1

I would do the following:

• Your containing element (text editor) must be a block level element. It is not editable.
• Your tags should consist of the following: a container in which the float on the left and inline-block or float ed children.
• The < non-floated (important) < contenteditable element .

Final 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 many tags, they will be carried over to the next line. Text in the editable element will also wrap around the tags.

Clicking on the tags will not give the focus of the element being edited, but you can fix this using JavaScript.

Here is an example that I whipped . Works in Safari / Chrome / Firefox. Not tested Internet Explorer, but it should work fine.