3

I have created a editor using div with content editable true and used a placeholder created by CSS. This works fine in all browser but Firefox.

Following is the code in html and css

HTML - 

<div contenteditable="true" data-placeholder="in case this div is empty"></div>

CSS -

div{
        padding:5px;
        margin: 1em;      
        border:1px solid gray;      
    }

        div:empty:before {
            content: attr(data-placeholder);
            color: gray;
        }

If we run above code in Firefox (I am using version 27) and click inside content editable div 2-3 times then cursor changes its position and I cannot write anything inside div. However, if we click outside div and again click inside div I get focus successfully and we can write in it. Please help how to fix this.

shashankt
  • 73
  • 7
  • Issue occurs even if I remove padding. – shashankt Mar 14 '14 at 12:48
  • Are you on OSX or Windows? Additionally, please test this: http://jsfiddle.net/7j2AD/ and tell me if it has the same problem. – Kelderic Mar 14 '14 at 13:04
  • I am using Windows. I tested with jsfiddle.net/7j2AD and issue is reproducible – shashankt Mar 14 '14 at 13:09
  • The unfortunately the problem is with your installation of Firefox, or an addon. I've tested that Fiddle with FF 27.0.1 on 3 different machines here, and all works. Try disabling addons, and if that doesn't work you might have to reinstall FF. – Kelderic Mar 14 '14 at 13:42
  • @AndyM may be you're not following steps correctly. It's reproducible on every machine i've tested. windows+ff, osx+ff, ubuntu+ff. – mayankcpdixit Jun 19 '15 at 05:28
  • **@shashankt** remove padding and border and all styling in DIV. put display block in placeholder's styling. [see update](http://jsfiddle.net/7j2AD/1/) try now. if it still occurs tag me in comment with your fiddle and may be a snapshot. – mayankcpdixit Jun 19 '15 at 06:15
  • Nope, I followed them exactly. If you look at the Fiddle I linked to, it contains exactly the code shown in the question. However, it's been well over a year, and browsers change. FF is now on version 38, and right now I'm running into a different problem than the one described by the OP. On FF 38, after anything is typed in, the placeholder disappeared, and doesn't reappear when the input text is deleted. This also occurs on the updated Fiddle you provided. – Kelderic Jun 22 '15 at 23:50

2 Answers2

1

You need to set the :before pseudo element position to absolute, like so:

div:empty:before {
    content: attr(data-placeholder);
    color: gray;
    position: absolute;
    top: 0;
    left: 0;
    padding: 6px;
    width: 100%;
    height: 100%;
}

but once you do it introduces this caret positioning issue due to this Firefox bug. Pick your poison >:(

Community
  • 1
  • 1
Patricia Li
  • 1,346
  • 10
  • 19
0

Can you try giving display block to the CSS of placeholder? It worked for me.

Anirudh Prabhu
  • 53
  • 6