How to make such Invisible Input and cursor ?

https://monkeytype.com/ I see no input box here but I'm able to type, I don't think it is event listener. I found alternate Project which is clone of above site https://github.com/thisissteven/monkeytype-clone/blob/main/app/src/components/Game/TypingInput.tsx#L164 But it uses Input box and how make that cursor while typing ? I see span tag which is moving by providing left value but there can't be speicific value for all letters and for all font types.
Monkeytype | A minimalistic, customizable typing test
The most customizable typing test website with a minimal design and a ton of features. Test yourself in various modes, track your progress and improve your speed.
GitHub
monkeytype-clone/app/src/components/Game/TypingInput.tsx at main · ...
A typeracer app based on monkeytype. Contribute to thisissteven/monkeytype-clone development by creating an account on GitHub.
No description
24 Replies
MarkBoots
MarkBoots10mo ago
I didn't look at it, but probably the container/div has a contenteditable=true attribute on the element https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
MDN Web Docs
contenteditable - HTML: HyperText Markup Language | MDN
The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.
Bismuth
Bismuth10mo ago
there's a input box present
MarkBoots
MarkBoots10mo ago
ohw, you said there is none
Bismuth
Bismuth10mo ago
no it's not that, cuz i can't put my cursor unless i type
Jochem
Jochem10mo ago
looking at the original monkeytype, they have a keydown listener on the window, so it does just use an event handler
Bismuth
Bismuth10mo ago
When you type something, a new sentence is added, and the previous one is pushed upward. What I did was give it a fixed height and set overflow to hidden. When the user types, I adjust the top property to -2rem. However, a problem arises when I add functionality to change the font, as now the letter spacing and font are also changed. yes there is event listner but on what ? input then where is that input or is it on window object ?
Jochem
Jochem10mo ago
it's on the window object yeah
MarkBoots
MarkBoots10mo ago
If i was making it, i would lay 2 input boxes on top of eachoter. one with the preview text as value, and 1 for the user input. when both have the same font styles, it should match
Jochem
Jochem10mo ago
this is a separate question. When you ask this one in a new post, please include a codepen that demonstrates your problem, it makes it so much easier for people to help
Bismuth
Bismuth10mo ago
what about the cursor how to design that ? i can't set left with fix px value cuz it may not be valid for all letters
Jochem
Jochem10mo ago
that really depends on how you're implementing the clone. If you use Mark's idea, you'll get a cursor for free Monkeytype uses this
<div id="caret" class="default hidden" style="font-size: 1.5rem; animation-name: caretFlashSmooth; opacity: 1; display: block; top: 3.6px; left: 5px;"></div>
<div id="caret" class="default hidden" style="font-size: 1.5rem; animation-name: caretFlashSmooth; opacity: 1; display: block; top: 3.6px; left: 5px;"></div>
it's moved about as you type with javascript Monkeytype emulates the entirety of the input field with javascript, it's just a bunch of divs, one for each word with a custom letter tag for each letter (I don't think they properly used a webcomponent for it either, it's just an unimplemented tag that the browser mostly treats as transparent)
Bismuth
Bismuth10mo ago
yes but left:5px and left:19px but can it be valid for all letters? if i keep on increase 14px for each letter ?
Jochem
Jochem10mo ago
why don't you try? I don't know what'll happen if you shift some px values around in code I haven't seen and can't run myself
Bismuth
Bismuth10mo ago
i saw on monkeytype it changes on some letters like 14px and 17px sometimes
Bismuth
Bismuth10mo ago
Monkeytype Clone
Monkeytype Clone
A typeracer app based on Monkeytype
Bismuth
Bismuth10mo ago
can you take a look at this website it uses input box too is this what mark was talking about ? can you provide me the file where you found it ? or file name you found on monkey github repo I didn't find that
Jochem
Jochem10mo ago
I just used the inspector and triggered on keyboard events. The code is minimized so it's not really worth reading beyond that the site you linked uses an input, but not like Mark suggested. It focuses you on the input and you type into it, but it's still manually changing the letters, giving them a different class so they show up differently the input is completely hidden by an opacity-0 class
Bismuth
Bismuth10mo ago
can you please explain little more about the mark idea ?
Jochem
Jochem10mo ago
As far as I understand it, his idea is to overlap an input and a div such that what you type in the input perfectly covers up the div.
MarkBoots
MarkBoots10mo ago
they are (with a reason) using a mono-space font. So all characters have the same width this, or just use 2 input's on top of eachother. so you can style both the same
MarkBoots
MarkBoots10mo ago
small example. no keypress event logic https://codepen.io/MarkBoots/pen/zYbzwyp
MarkBoots
MarkBoots10mo ago
but i do think you'll need another approach, because if you have typo's, you probably want to change color for the specific char. that can not be done within an input
Bismuth
Bismuth10mo ago
what if user is typing something else instead of hello world, text doesn't overlap now and looks ugly
Jochem
Jochem10mo ago
you would use Javascript logic (which he specifically said wasn't in there) to either prevent the keypress from going through, or to change the text underneath but there's a reason Monkeytype went the way they did, it's probably the best solution if you want to match all their features
Want results from more Discord servers?
Add your server