Next.js Discord

Discord Forum

input typing caret

Unanswered
Nile tilapia posted this in #help-forum
Open in Discord
Nile tilapiaOP
Does anyone know if there is a way to edit the typing caret? i am trying to recreate the typing caret from the linux terminal
https://i.givemeyourcreditcard.info/71yofyvg.png

19 Replies

Nile tilapiaOP
1 sec I can look when I get to my pc
@joulev ~~try `caret-shape: block`~~ nah this one is not supported in browsers
Nile tilapiaOP
damn and the way they show you can fake it is not actually in a input
oh... i didn't see that
Nile tilapiaOP
its fine
but yeah safe to say there is no easy way to do this, you need some css shenanigans or js libs
browsers dont support that css property yet
Nile tilapiaOP
do you know any ts libs that can do something like this?
i don't know any, but searching for some at the moment
@Nile tilapia do you know any ts libs that can do something like this?
you can use monaco editor if it's suitable for your purpose, it has cursorStyle: "block"
but it's not for every type of input
that's the only way i can find honestly. other than that, you can kinda do it by
* get the position of the caret (search on google, there are some stackoverflow questions with working but ugly code but that's the best we can do)
* use css to render a fake blinking rectangle absolutely positioned to the position calculated above
* use caret-color to hide the caret
but i can't imagine the amount of edge cases this method has. what if someone resizes the browser? what to do when the input is unfocused? and a ton of other questions that you need to answer
@joulev you can use monaco editor if it's suitable for your purpose, it has `cursorStyle: "block"`
Nile tilapiaOP
does it work on the default text input
No it doesn’t
Nile tilapiaOP
💀
then what does it work with
Go read what it is
Nile tilapiaOP
i might just wait until they add native support because i cant find anything on monaco editor for react i may just be blind and dont feel like messing around with a very not well put together work around