I’m attempting to implement this functionality for a typing website so that every character that is entered will be enclosed in a span. However, I was unable to figure out how to make a custom text-editable <div>
instead of a <textarea>
.
Here is how the output should look.
<div className="typableCustomDiv">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
</div>
The reason why I want to enclose them in a span to imitate a <textarea>
is for the following reasons:
- Incorrect characters will have a strikethrough and be colored red.
- Green will be used to highlight the correct characters.
- Create a transition such that each character you type should appear gradually, with an ease of 0.25 seconds from opacity 0 to 1.
- etc.