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 plicated 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.

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 plicated 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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 21, 2012 at 10:31 Manu asked Feb 21, 2012 at 9:16 ManuManu 4,50077 gold badges4444 silver badges8080 bronze badges 10

• 1 You can always put focus on the span with a click event on the container – dirkbonhomme Commented Feb 21, 2012 at 9:20
• 2 Does the text in the textarea have to start on the same line as the divs? If you could start it on the next line, it would be a lot easier. – GregL Commented Feb 21, 2012 at 9:22
• hope this help net.tutsplus./tutorials/javascript-ajax/… – Vivek Commented Feb 21, 2012 at 9:23
• @GregL : If I can't do it I'll make it start under the divs, but it would be prettier if they are on the same line. – Manu Commented Feb 21, 2012 at 9:28
• 1 Note, that simulating text selection across spans (to provide the same experience as textarea) will be pain in the a**. I'm not so sure this solution is less plicated than using one textarea and making sure that text is shifted so it starts after div1 or div2. – WTK Commented Feb 21, 2012 at 9:53

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 6

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.