7 ms·
Detect Caps Lock with JavaScript
- spankalee 3y agoIt'd be nice to be able to do this without a keyboard event so that you should show an indicator in the password field that caps lock was on before they started typing.
- richwater 3y agoYou should be able to do this just fine with MouseEvents, and use `mouseup` or `mousedown` on the input box to trigger your "Caps On" icon, visible before the user starts typing. docs: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/getModifierState https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/...
- twiss 3y agoIt wouldn't even need to be an event on the input, it could be any key or mouse event on the document, including mousemove. That being said, I think it would be better if browsers would implement this; that would make it more efficient and more predictable.
- richwater 3y ago> mousemove True, but I was trying to avoid handlers being fired constantly. Just something to consider.
- berkes 3y agoIt could be an onFocus as well, I presume.
- stephenr 3y ago> so that you should show an indicator in the password field So I take it none of the OS/browser vendors besides Apple are doing this natively yet?
- xtalx 3y agoDavid Walsh! Blast from the past. I used to read his stuff when I was starting out almost 20 years ago.
- mdtrooper 3y agoThe big pitfall in the api of browser and keyboard is there is not a method to get the status (keys pressed) of the keyboard. I know that it is about security stuff, but for the games in js is a bad situation when the canvas lost the focus and the keys pressed change.
- Waterluvian 3y agoI fought with this so much today. Our robots can be driven remotely via a web app. But there’s ways to accidentally get buttons stuck down because keyup is never guaranteed and you can’t get key state. Two cases: holding down forward key and blur the tab, or open contextmenu. There’s workarounds of course. But it’s comical spending so much time on something so simplistic.
- pininja 3y agoThis might be an appropriate use for the Gamepad API which can be queried on every animation frame for a button’s state. https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API...
- Waterluvian 3y agoThe Gamepad API is fun, but we’re not trying to implement a gamepad.
- dataflow 3y agoHow is this a security issue?
- Retr0id 3y agoYou can handle the onblur event and use it to clear all pressed keys.
- beeboobaa 3y ago> Ideally developers could let the user know their caps lock key is activated. That would be up to the User Agent (the browser), not the website.
- Retr0id 3y agoWell, they're not, which means web developers are picking up the slack.
- ninkendo 3y agoI dream of a parallel universe where browsers took the lead in crafting innovative UI’s for standard web forms, with things like password prompts behaving intelligently, dropdowns supporting advanced autocomplete, excellent date pickers, caps lock reminders on password dialogs, etc etc. Websites could have been simple to make with basic markup, leaving UX niceties to the browser vendors. The world we live in is about as far from that as you get, with the stock UI for <input> elements being about par for 1992 UI toolkits, if even that.
- throwaway2037 3y agoThe pair of animated GIFs adverts ("Request Metrics") inserted into the body of the article are simply awful.
- icepat 3y agoPoor formatting aside, this feels like a blogspam tutorial. Feels like a weird article to be this high on HN. I don't see what's notable here in the vanilla JS features that the author is pointing out.
- OccamsMirror 3y agoI was unaware of this `getModifierState` feature. I learned something that may help me in the future.
- internetter 3y agoIf you google 'detect caps js' you will find hundreds of articles on this very topic, and bard will provide a correct solution in the top of the window. No need for this to be here.
- icepat 3y agoThird result is a far better StackOverflow post as well, without the irksome formatting of the posted link: https://stackoverflow.com/questions/348792/how-do-you-tell-if-caps-lock-is-on-using-javascript https://stackoverflow.com/questions/348792/how-do-you-tell-i...
- throwaway2037 3y ago"blogspam tutorial": What a brilliant phrase. My teammate and I were recently joking about the same for Python blogs. If you Google any "simple" Python programming question, the results are overloaded with "blogspam tutorials". I cannot wait until ChatGPT will replace all of that crap.
- extraduder_ire 3y agoDoesn't this only detect when you press caps lock and turn it on? That's the result I got from testing it out in the browser console. Despite not using the site anymore, I appreciate how facebook handles this. If your password is incorrect, it checks again with the case swapped to account for caps lock being on.
- EthicalSimilar 3y ago> If your password is incorrect, it checks again with the case swapped to account for caps lock being on. I love this idea, going to add this to future projects.
- sroussey 3y agoThis is a terrible idea! It means that the passwords have far less entropy. It means the uppercase you password when generating a hash. Good lord.
- nekasrbenda 3y agoyOUaREwRONG1!
- bheadmaster 3y agoTechnically, one bit less, which is insignificant for strong passwords. And for weak passwords... Well, it's not like that one extra bit would have made a difference.
- anymouse123456 3y agoJust came here to say, please don't do this to your users, or your business. Also, can someone please tell me that Facebook doesn't really do this?
- jerbear4328 3y agoFacebook does do this, and it's perfectly fine: https://security.stackexchange.com/a/214815 https://security.stackexchange.com/a/214815 It exchanges a few bits of entropy for a much smoother user experience, and it doesn't actually aid an attacker much (they could just try the permutations themselves)
- austin-cheney 3y agoYou could detect caps lock by looking for these conditions: * consecutive uppercase alpha characters are entered * the shift property on the keyboard event is false
- selcuka 3y ago> consecutive uppercase alpha characters are entered Why consecutive? Only one uppercase character without the shift key being used should be sufficient. That being said, it's probably not the best method as the users can also copy/paste passwords, or use a password manager.
- austin-cheney 3y agoThat is why consecutive key events is necessary, to distinguish character versus a string paste operation.
- butz 3y agoIsn't keypress and paste two different events?
- ryandrake 3y agoI dunno. Does the password use case really justify writing and maintaining this code rather than just relying on the little LED light on just about every keyboard that does the same thing? The tiny amount of user pain doesn’t seem to be worth it. Part of engineering is deciding whether we should, not just whether we can.
- iamleppert 3y agoA good way to reduce your support burden is to try user passwords twice: once how they entered it and the second with case reversed.
- StayTrue 3y agoI have been online since 1992 and have never seen this pattern.
- pxx 3y agoFacebook removes two bits of entropy on login: it tries the entire passphrase with case reversed and just the first letter with case reversed. There's also some fanciness with username correction if you have old cookies.