html - Any ideas as to how I make a "placeholder" effect like this? (placeholder that always shows) - Stack Ov

im a beginner css html developer trying to make a simple monkeytype copy (I forgot css html after years of not using it lol)

What im trying to do here is to create a "placeholder" or background text that shows while the user is typing (kind of like guiding the user while typing). However, with the way native placeholders work, they immediately hide after typing in them.

It also has to be compatible with scrolling inside a textarea (just like a normal placeholder), so just adding an overlayed text doesn't work and it would be inefficient

Example

Edit: I am not trying to make a typing animation. Im just trying to get the placeholder text to always show

im a beginner css html developer trying to make a simple monkeytype.com copy (I forgot css html after years of not using it lol)

What im trying to do here is to create a "placeholder" or background text that shows while the user is typing (kind of like guiding the user while typing). However, with the way native placeholders work, they immediately hide after typing in them.

It also has to be compatible with scrolling inside a textarea (just like a normal placeholder), so just adding an overlayed text doesn't work and it would be inefficient

Example

Edit: I am not trying to make a typing animation. Im just trying to get the placeholder text to always show

• html
• css

Share Improve this question Follow edited Feb 1 at 3:09 wheatwhole asked Feb 1 at 2:00 wheatwholewheatwhole 133 bronze badges 3

• 2 What have you tried so far? You can always suggest an alternative design and implement it. If you want some feedback and help, you need 1) Describe the behavior you want to suggest in detail. 2) Try to implement it. 3) If you face some problems, provide a Minimal, Reproducible Example and ask your questions. – Sergey A Kryukov Commented Feb 1 at 2:43
• If you use your browser devtools inspect facility you will see that every letter is in its own element and every word is its own element. – A Haworth Commented Feb 1 at 8:46
• @AHaworth thanks, I found this to be the solution (making an element for every letter and word) – wheatwhole Commented Feb 1 at 15:26

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

So what you could do is literally put the bar with ::after animated as a cursor effect and capture the KeyboardEvent event and increase its position for all the letters that have a class like "letter" with the appearance of placeholder and each time you capture the event you compare if it is the letter that has the value of the node and you add the correct or incorrect class and the after, so that each time you press it, the position changes.

<div class="word active">
      <div class="correct">H<div> 
      <div class="incorrect">E<div> <--here animation-->
      <div class="leter">L<div>
      <div class="leter">L<div>
      <div class="leter">O<div>
<div>

<div class="word">
      <div class="leter">W<div>
      <div class="leter">O<div>
<div>

Use a label with Absolute Positioning Instead of using placeholder, you overlay a label inside the textarea and hide it when the user starts typing.

Please confirm if it works for you