I implemented a simple placeholder based on the available examples. Unfortunately, whenever the placeholder text is shown, the cursor caret vanishes in Firefox. Note that it works fine in Chrome.
I noticed that Firefox gets confused with the content-editable=false attribute which gets automatically attached for PM decorations. So, when I change content-editable to true, the blinking caret is shown again. This is not a solution, just an observation for tracking down the root cause.
Here is a screencast for Firefox (not working):
And a screencast for Chrome (working as expected):
Does anyone know of a good workaround for Firefox, that also works with other browsers?
Hi, I recently had to implement placeholder and was following examples from this thread: How to: input-like placeholder behavior, have a look at the last post by aeaton. Works in Firefox without any carret issues for me.
@algus: Thanks for referencing the implementation. Yes, this should work as no new DOM elements are created and everything is done with pure CSS. Will test this solution and report back.
@algus: Thanks for that pure css placeholder solution which I can now confirm to work also with Firefox. I made some adjustments to the original solution from @aeaton which I am going to post here for reference.
As you can see I attach a placeholder spec to the schema in order to enforce some rules and also to be able to define the placeholder text. The placeholder spec looks as follows:
Thus, placeholder text gets injected from the data attribute. Note pointer-events: none; is quite cruical, otherwise selection inside the PM editor does not work where the placeholder text displays.