javascript - Can't get to empty paragraphs in contentEditable - Stack Overflow

I have a contentEditable article, with "EmbeddedSection" div's (recursive) which have a paragraph above and below them. In chrome, if the paragraph is empty, you can't actually get to it. In IE you can, but the size is all wrong.

/

<article contenteditable="true">
   <p><span class="numbering">Title</span><span class="TextChunk"></span></p>
   <div class="EmbeddedSection">
       <p><span class="numbering">1</span><span class="TextChunk">Section Title</span></p>   
       <div class="EmbeddedSection">
           <p><span class="numbering">1.1</span><span class="TextChunk">Embedded title</span></p>
           <p><span class="TextChunk">Th</span><span class="TextChunk">e </span><span class="TextChunk">.</span></p>
       </div>
       <p><span class="TextChunk"></span></p> <!--Can't get to this element-->
       <div class="EmbeddedSection">
           <p class="Paragraph"><span class="numbering">1.2</span><span class="TextChunk">Another title</span></p>
           <p class="Paragraph"><span class="TextChunk">Blah blah blah</span></p>
       </div>
       <p><span class="TextChunk">Can get here, but not the one above 1.2 in chrome (ie gets there).</span></p>
       <div class="EmbeddedSection">
           <p class="Paragraph"><span class="numbering">1.3</span><span class="TextChunk">Another title</span></p>
           <p class="Paragraph"><span class="TextChunk">Blah blah blah</span></p>
        </div>
        <p><span class="TextChunk"></span></p> <!--Can't get to this element-->
    </div>
</article>

Does anybody know if I'm able to style the empty paragraphs or somehow mark them as something which enables them to be reachable?

(Note: putting even a single whitespace character works, even after the user has edited and removed that whitespace character.)

I have a contentEditable article, with "EmbeddedSection" div's (recursive) which have a paragraph above and below them. In chrome, if the paragraph is empty, you can't actually get to it. In IE you can, but the size is all wrong.

http://jsfiddle/hE8zS/1/

<article contenteditable="true">
   <p><span class="numbering">Title</span><span class="TextChunk"></span></p>
   <div class="EmbeddedSection">
       <p><span class="numbering">1</span><span class="TextChunk">Section Title</span></p>   
       <div class="EmbeddedSection">
           <p><span class="numbering">1.1</span><span class="TextChunk">Embedded title</span></p>
           <p><span class="TextChunk">Th</span><span class="TextChunk">e </span><span class="TextChunk">.</span></p>
       </div>
       <p><span class="TextChunk"></span></p> <!--Can't get to this element-->
       <div class="EmbeddedSection">
           <p class="Paragraph"><span class="numbering">1.2</span><span class="TextChunk">Another title</span></p>
           <p class="Paragraph"><span class="TextChunk">Blah blah blah</span></p>
       </div>
       <p><span class="TextChunk">Can get here, but not the one above 1.2 in chrome (ie gets there).</span></p>
       <div class="EmbeddedSection">
           <p class="Paragraph"><span class="numbering">1.3</span><span class="TextChunk">Another title</span></p>
           <p class="Paragraph"><span class="TextChunk">Blah blah blah</span></p>
        </div>
        <p><span class="TextChunk"></span></p> <!--Can't get to this element-->
    </div>
</article>

Does anybody know if I'm able to style the empty paragraphs or somehow mark them as something which enables them to be reachable?

(Note: putting even a single whitespace character works, even after the user has edited and removed that whitespace character.)

• javascript
• css
• html
• contenteditable

Share Improve this question Follow edited Jul 18, 2013 at 4:27 gremwell asked Jul 18, 2013 at 4:05 gremwellgremwell 1,4571717 silver badges2424 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

You can add

:empty {
    display: block;
    height: 1em;
}

And it seems to work: http://jsfiddle/hE8zS/3/

This page contains information on browser patibility: https://developer.mozilla/en-US/docs/Web/CSS/:empty

Simple placeholder for contenteditables:

[contenteditable]:empty::before {
    content: 'Your Placeholder Text';
    color: rgba(0,0,0,0.2);
}

I've actually moved on from using :empty as it doesn't select right and doesn't play nice with contenteditable.

I actually ended up putting in a zero-width whitespace in any paragraph that was empty (and some associated javascript to skip it on keypress), meaning it sizes it correctly, and plays nicely with contenteditables. See my bug report for chrome here http://code.google./p/chromium/issues/detail?id=292334