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

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..." class="newParagraphPlaceholder" 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.

javascripthtmlcsscontenteditableplaceholder


Solution 1:[1]

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;

Solution 2:[2]

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 class="newParagraphPlaceholder"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.

Solution 3:[3]

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..." class="newParagraphPlaceholder" data-mce-style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold; color: #000; "></span>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Faizal Hussain
Solution 2 Wake
Solution 3 SHAHIL MISHRA

Related Questions