Placeholder text in <span> element is not working correctly specifically in Firefox-CodePudding

I am trying to create a placeholder in span element, and when user focus on the text the placeholder disappear and user are able to type something on it.

If you run the code below in other browser such as Chrome and Edge, the placeholder disappear correctly when you focus on the text, however on Firefox, you can't seems to focus or edit the text. I would like to know what's the difference between Firefox browser and others, and would also prefer if this can be resolve via CSS instead of Javascript.

HTML:

<body contenteditable="true">
<span style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold;" data-runningid="1.1" data-placeholder="Enter new paragraph here..."  data-mce-style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold;">
</span>
</body>

CSS:

.newParagraphPlaceholder {
    display: inline-block;
}

.newParagraphPlaceholder:empty::before {
    content: attr(data-placeholder);
    color: grey;
}

Kindly refer to the demo here: https://jsfiddle.net/6L8gyfk7/2/.

Take note that there's a body with attribute contenteditable='true' tag wrapping the span tag that I need to preserve.

CodePudding user response：

Because in Mozilla the -moz-user-focus is set to none by default, you can check this by going to console --> computed

You can fix this by

-moz-user-focus: select-after;

CodePudding user response：

Something I don't get from your code though is why you're using so much styling within your ? You get the same result if you do

  <span data-runningid="1.1" data-placeholder="Enter new paragraph here..."></span>

.newParagraphPlaceholder {
    display: inline-block;
    font-size: 16pt;
    font-weight: bold;
}

Might be just me though, but with a long batch of code you're into a big struggle to adjust certain areas because it isn't properly written down in CSS.

CodePudding user response：

I removed contenteditable from body to span and it woked and if you want to check browser support for css Property you can check here Codepen Link

.newParagraphPlaceholder {
    display: inline-block; 
  outline: none
}

.newParagraphPlaceholder:empty::before {
    content: attr(data-placeholder);
    color: grey; 

}

<!-- html is the same -->
<body >
  <span contenteditable="true"  style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold;" data-runningid="1.1" data-placeholder="Enter new paragraph here..."  data-mce-style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold; color: #000; "></span>
</body>