Change input caret to a block?

[spotUP]

Oldschool terminals didn't use a line as an input caret but a block, could this be implemented?

[spotUP]

I forgot to say, a blinking block, ofcourse. :D

[kristopolous]

there's caret-color and that's about it. generally speaking fucking with the baseline ux elements like text input with javascript is far harder that one thinks. i still frequently see bugs on facebook's version ...

Arguably firefox has the api that would make this actually possible in a bug free way https://developer.mozilla.org/en-US/docs/Web/API/CaretPosition ... but yeah, that's about all there is for now.

[kristopolous]

as an aside I have put a blocky cursor in just recently ... 46d7de0 around there ... there's not integration, testing, documentation yet but that'll come soon

[spotUP]

Awesome!

[spotUP]

It offsets incorrectly though? Are not all your lines the same height?
On the site i am building all lines are the same height, i changed that in my site.css maybe it will work better there? I am aiming for an Amiga BBS look on my site so having the mouse as a cursor feel wrong. I have added the amiga mouse pointer on my site instead.. for the input fields it would be awesome though but i understand that it might be tough to do .. hmm

[kristopolous]

yeah it was only half done yesterday ... the vertical problem has been alleviated by a hack to scroll to the character start (essentially by adding negative padding when the scrolling happens, keeping the content aligned) see 144a490

This feature fixes the other issue.

The horizontal alignment hasn't been addressed.

[kristopolous]

also I'll need to revisit this code and do requestAnimationFrame, which is apparently how this is supposed to be done these days so as to not pester complicated sites with a bunch of redraws.

[kristopolous]

I pulled that off here: http://9ol.es/tmp/demo.html but it takes some javascript hackery to make it work.
It looks like there's a pure-css solution these days over here: https://css-tricks.com/almanac/properties/c/caret-shape/ so I'll look into that.