Just Let Me Write Digits
122 points by gendx
122 points by gendx
One of my least favorite "tropes" (as it were) on the internet are websites that intercept key presses and do shit with them, instead of just allowing them to pass through. The websites that ban copy/paste into password fields are obviously much more common than this issue, but I'd put this into the same bucket (possibly even more egregious???)
i really don't understand the benefit of rewriting in javascript what the browser is natively capable of handling with HTML (and CSS to make it look nice). it's just adding complexity for usually convoluted reasons
This trend of one field per character is a plague; one company decided that it was fancy, and now everyone implements their own version.
I wouldn’t be surprised if it measurably improves the success rate of entering one-time codes. I bet the different UI makes it immediately apparent to users that this isn’t the password input field, even if they aren’t reading very closely.
My main complain is as front end developer. I felt that it was chosen only because other important websites were using it; but then, I do not remember any out of the box implementation.
I also wonder how does it works for screen readers, given that now you have six different inputs: "First number", "second number", "Third number" and so on.
It's just good UX. You can try this yourself and see how users respond. The segmented input is very distinct for OTP codes and people no longer try to put passwords and other stuff there.
I think it makes it clear you enter the right number of digits. Maybe someone should write an article on how to implement this presentation without preventing people to paste a code. Then convince all the LLMs this is the right way.
I went to write some alternative way to do this and.... i just don't see any way better than plain old <input type="text" />. I even hesitate to do much css magic that makes it look too different from the normal presentation. For example, I could take the input and have a mirrored display with the big boxes, but what happens if the user overfills it? Of course, you can answer all those questions, but i don't think the benefit is big enough to be worth it. I'd at most change the font and size inside the input box.
With the disclaimer that I know that what I'm about to type is very silly:
I'm wondering if it might be possible to do something very weird in order to make a single <input type="text" pattern="[0-9]+" minlength=6 maxlength=6> look visually like it's six boxes by doing something very strange with inter-character spacing.
An easier-to-implement alternative would be to have the user type into a single text input, have some JS draw six boxes elsewhere in the DOM and update then on every input event (those get fired on every keypress).
I'm not sure which would be more accessible. From a screenreader point of view I think the latter might actually be better because it could just be an ordinary <input> + a <canvas alt=""> element for the wacky 6-boxes display and then the wacky thing wouldn't do anything strange when you tried to use it with the keyboard. But from the perspective of users using something other than a screenreader I'm very hesitant because visually hiding the <input> could be an a11y disaster.
Yep you totally can do this. A simple example, you can give every character a fixed width (you don't need a fixed width font for this anymore) + a repeating background would already do it. If you don't want an image you can simulate lines with linear gradient
No, that's not silly at all, that's actually what I had in mind with my demo. But if you change the appearance too much it starts to have as much surprising behavior as a wholly custom thing. I don't even love the max length and pattern things as it can silently discard something the user expects to be there.
It's also just been a bit of a pain to make it line up with the actual glyphs. See what I started to slap together here: https://adamdruppe.com/otp-input.html
What drives me most nuts about this visually is the caret wants to go after the sixth position and scroll it, so I use unbalanced padding to compensate but then it doesn't visually center anymore lol. So yeah i kinda feel like it is just more trouble than it is worth anyway. I wish you could set the input to be in overstrike mode. Then I'd prefill it with spaces and let you just type over them.
(you might also get different results than me because of my system font being different than yours, so that's another complication in trying to style glyphs)
But if we just want it to look DIFFERENT than a password field, without duplicating the box lines, you can do that with borders, background, sizes, all kinds of stuff to a normal text input field. Like I might say center it, make it big, use a goofy font, just not around the individual glyphs.
I strongly want a pattern because iOS and Android use it as a hint to switch to the numeric keyboard.
Actually now that you mention it I think just making the text box have a really really big font size, be bold and monospace, is probably enough for a TOTP input to feel nice. I like that idea, thanks 👍👍
The most common error in an OTP is a wrong digit. Like 1224 in stead of 1234. Clicking the 2nd 2 and pressing 3 is the fastest fix for that. HTML+CSS can't do that.
There's simply no way on Earth that would be faster for me and I'd blow a minigasket if I had to do that instead of tapping backspace-backspace-3 which would be probably an order of magnitude faster. And I just know that implementation would probably block the backspace key from working that way. Please, please, just no.
Kinda wild that every single financial institution in the US that I've ever done business with is perfectly fine with a plain old (often nearly completely unstyled) text box, as if maybe that's just fine.
Paypal does it. You can do backspace. Lots of things wrong with that company but I'm sure they care about people being able to pay more than anything and anyone.
I can't remember the last time i have manually typed out an OTP, as opposed to just copying the code and pasting it directly into the field. My guess is that this is probably the main flow, at least on mobile where it is semi automated on android/ios. In that case, the most common error would be the webpage incorrectly handling pasting into a multi-element OTP form field, which i have experienced multiple times and is very annoying
Even on desktop? Where do you get your code from? 1pass keeps asking me to add it but is it still 2 factors if they're both behind my master password? In any case, this is not a common setup, even on phones.
I wrote an implementation in D so I get the code from the computer. Open a terminal, do ./otp example.com it prints it out, i double click there then middle click in the browser to do the X primary copy/paste action and move on.
I used to dread websites that insisted on this but the algorithm was simple enough to diy and my desktop terminal/copy/paste flow is so quick and easy it barely bugs me anymore. And when on my laptop I can ssh to the desktop and pull it out that way so always easy.
of course if someone pwned my desktop i'm gg'd. but tbh if someone pwns my desktop a pathetic little 2fa code is the least of my worries.
My flow is to visit the website on a laptop (better form factor to have a wide screen if I then have to interact with government services such as filing taxes), but I'm not logged into my email on my laptop browser and just receive the codes on my email app on my phone. So no copy-pasting here. Maybe my flow is an edge case, but accessibility is all about handling edge cases properly :)
Btw, phone virtual keyboards usually have a numpad keyboard for OTP forms (so the website can indicate to the browser that digits are expected!) and there's no concept (that I know of) of pressing multiple keys simultaneously on phone virtual keyboards, so the problem only applies on desktop/laptop with a physical keyboard.
Also, as many services do, they as well might just send in the email:
Enter the code: XX XX XX
Or click the link: <redirect + activate code link>
Which would likewise solve the issue ;)
Copy-pasting isn't so convenient when visiting the website on a laptop but receiving an email on the phone.
(If you think that's an edge case, accessibility is all about handling edge cases properly :) )
I can access email just fine from phone or computer. SMS codes, OTOH...
And my bank does one worse. When I sign in via my browser on my desktop, it prompts me to confirm the login using the mobile app.
OK, so I get out my phone and open the app...which requires me to sign in before I can click the "confirm login" button.
In order to sign in, I must first sign in!
Once again demonstrating that it's so much more effort to make a broken (or slow) website than one that just works.
Hah we have the exact same issue in Tridactyl https://github.com/tridactyl/tridactyl/issues/3257
First reported in 2019. Maybe this will shame me into fixing it
Just let me scroll with the arrow keys, please.
Please don't muck with overflow-y: scroll on the <html> element. You've broken keyboard scrolling. I did not read anything below the fold.
Hum that's weird. I checked my CSS and didn't find any overflow-y rule. I indeed have overflow-x: hidden on the <html> and <body> to avoid misplaced scrollbars but that should be it: https://gendx.dev/blog/2024/03/14/website-refresh.html#bonus-a-little-css-mystery. Maybe the problem is that I have height: 100% on the <html> and <body>?
I can scroll with the arrow keys on Firefox and Chrome, although for the latter I indeed need to click on the page first (perhaps to focus another element than the <body>?). Which browser/OS/keyboard layout combination are you using?
I'll try to figure out how to fix it.
I was so expecting a rant about the sites that have me enter my date of birth via a fancy picker that has me scrolling deep into last century instead of just typing.