Pricing Blog

Clear `::after` placeholder after entering content

  • tomthebigtree-1170679088407650306

    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?
  • tomthebigtree-1170679505619267595

    Tom Ireland

    2 years ago

    This is related to stuff I'm exploring re my [toddle RTE](https://discord.com/channels/972416966683926538/1168449588626210876) post. I have a few iterations, one using input (which works) but I'm working with contenteditable div in this example.
  • lucasg-1170684477358493776

    Lucas G

    2 years ago

    Not a CSS solution, but you could have the placeholder attribute set to empty on click.
  • tomthebigtree-1170686105952194600

    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.
  • lucasg-1170704481026052146

    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
  • tomthebigtree-1170721185152114778

    Tom Ireland

    2 years ago

    @Lucas G - Hopefully this explains it in more detail. Appreciate you taking a look! 🙂

    https://www.loom.com/share/b1affd39cc8f4119a90c56c00fa30c44?sid=74452ccd-be9b-4657-9edb-53b481d61f02
  • lucasg-1170727305371451392

    Lucas G

    2 years ago

    Would you be able to share a link to the backend? If you're cool with it of course
  • tomthebigtree-1170727979467407460

    Tom Ireland

    2 years ago

    To my project you mean, @Lucas G ?
  • lucasg-1170728392912535712

    Lucas G

    2 years ago

    Yes
  • Now you've got me kinda hooked on this RTE thing lol
  • tomthebigtree-1170728728381362176

    Tom Ireland

    2 years ago

    😄
  • Tod-1170728730231062568

    Tod

    2 years ago

    Great energy @Tom Ireland! Your continuous contribution to the toddle Community just made you advance to Community Level 12!
  • tomthebigtree-1170728773788909568

    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. 😄
  • bleach03-1246303379295043636

    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?
  • lucasg-1246312487872237588

    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
  • lucasg-1246314739953438813

    Lucas G

    1 year ago

    Nevermind, just took a look and it was fixed.
  • lucasg-1246315019394744330

    Lucas G

    1 year ago

    1246315019080044616-image.png
  • 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
  • bleach03-1246635933877669988

    bleach

    1 year ago

    thanks @Lucas G , appreciate all your help
  • Tod-1246635935613849600

    Tod

    1 year ago

    Great energy @bleach! Your continuous contribution to the toddle Community just made you advance to Community Level 2!