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.
24 Replies
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/contenteditableMDN 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.
there's a input box present
ohw, you said there is none
no it's not that, cuz i can't put my cursor unless i type
looking at the original monkeytype, they have a keydown listener on the window, so it does just use an event handler
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 ?
it's on the window object yeah
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
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
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
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
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)
yes but left:5px and left:19px but can it be valid for all letters?
if i keep on increase 14px for each letter ?
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
i saw on monkeytype it changes on some letters like 14px and 17px sometimes
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
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
can you please explain little more about the mark idea ?
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.
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
small example. no keypress event logic
https://codepen.io/MarkBoots/pen/zYbzwyp
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
what if user is typing something else instead of hello world, text doesn't overlap now and looks ugly
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