Clear `::after` placeholder after entering content
Tom Ireland
2 years ago
I have an ::after pseudo element with content set to attr(placeholder)(pulls in string from placeholder attribute) applied to an empty contenteditable div so that I can display some instructions prior to when the user starts typing. Upon typing some text, I'd like the placeholder to be removed/hidden but I cannot figure out how to do it. Interwebs suggest chaining with :empty but that does not appear to be an option in styles. Any pointers?
Not a CSS solution, but you could have the placeholder attribute set to empty on click.
Tom Ireland
2 years ago
@Lucas G- I did think about that but focus is done on element so you see cursor to start typing. Without placeholder, the user is not sure what to do, hence the instruction. Inspiration taken from Notion editor.
Lucas G
2 years ago
I'm not sure I follow. The placeholder would be visible and would only disappear once the user clicks to start typing, no? At that point the user knows that it is an input
Now you've got me kinda hooked on this RTE thing lol
Tom Ireland
2 years ago
😄
Tod
2 years ago
Great energy @Tom Ireland! Your continuous contribution to the toddle Community just made you advance to Community Level 12!
Tom Ireland
2 years ago
Sure! Want to DM me your email, @Lucas G?
Literally just found a hacky-ish way around it using :focus-within::after but still not the best. 😄
bleach
1 year ago
hey @Tom Ireland its been a while since u opened this thread but im having the same issue as u. Do u mind showing me how u fixed this?
Lucas G
1 year ago
It's been a while since this but I'm not sure it ever got 'fixed'. We collaborated on it for a little bit and ended up going a different direction with it
Lucas G
1 year ago
Nevermind, just took a look and it was fixed.
Lucas G
1 year ago
That sets the placeholder attribute on the input
And on input event, the variable is set to false which clears the placeholder
Could make it even simpler by just having a placeholder variable with an initial value which gets set to an empty string on the input event
bleach
1 year ago
thanks @Lucas G, appreciate all your help
Tod
1 year ago
Great energy @bleach! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
@Tom Ireland
.jpeg/public)