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
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.
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.
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.
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.
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
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.
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?
drmorr | 17 hours ago
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???)
girlonthemoon | 14 hours ago
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
cadey | 10 hours ago
For what it's worth, Claude Fable 5 (and presumably other models though I haven't tested them) does this by default:
olliej | 10 hours ago
Hahaha…ha…ha…. Oh. Oh no.
zipy124 | 58 minutes ago
My god. I wonder what the hell was going on in the training data/ RLVR/ RLHF process that causes something like this.
fedemp | 15 hours ago
This trend of one field per character is a plague; one company decided that it was fancy, and now everyone implements their own version.
jennings | 13 hours ago
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.
fedemp | 7 hours ago
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.
vbernat | 19 minutes ago
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.
ubernostrum | 15 hours ago
Related: Medium once had a bug like this which prevented entering the character 'Ś'.
adam_d_ruppe | 15 hours ago
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.theblacklounge | 12 hours ago
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.
colemickens | 12 hours ago
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.
theblacklounge | 11 hours ago
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.
baetylboy | 9 hours ago
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
theblacklounge | 2 hours ago
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.
[OP] gendx | an hour ago
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.
0x2ba22e11 | 12 hours ago
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
inputevent (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.evert | 12 hours ago
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
BinaryIgor | 15 hours ago
Also, as many services do, they as well might just send in the email:
Which would likewise solve the issue ;)
Riolku | 13 hours ago
I think social engineering users into clicking links in emails is a step backward in our defenses against phishing
zk | 12 hours ago
Yeah exactly. They don't (usually) include links in these emails for that reason.
[OP] gendx | 11 hours ago
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 :) )
bovine3dom | 12 hours ago
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
kaimac | 10 hours ago
Once again demonstrating that it's so much more effort to make a broken (or slow) website than one that just works.
anagnost | 3 hours ago
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.
twm | 4 hours ago
Just let me scroll with the arrow keys, please.
Please don't muck with
overflow-y: scrollon the<html>element. You've broken keyboard scrolling. I did not read anything below the fold.[OP] gendx | an hour ago
Hum that's weird. I checked my CSS and didn't find any
overflow-yrule. I indeed haveoverflow-x: hiddenon 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 haveheight: 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.