8 ms·
Ask HN: Why do web sites not place the cursor for input?
To their credit, Microsoft puts the cursor in the text field ready for me to type in my authenticator code. Most web sites I've found, do not. So I look up with my shiny new code, ready to start typing, realize I need to move my hand to the mouse, place the cursor into the field then there's a 50% change I've forgotten the code and have to look back at my phone.
- htfu 3y agoVimium. gi
- bdavbdav 3y agoSimilar vein, there’s a special place In hell for web / iOS developers who don’t flag input fields correctly to allow autofill / password managers to work. I see it in a lot of crappy legacy iOS apps.
- kiwijamo 3y agoThis is also an issue in Android and desktop browsers. I've also seen some websites actually go to extra effort to prevent autofill from working.
- ravenstine 3y agoEven worse is when the input is initially has the cursor, but then the site's absolute genius SSR rehydration kicks in, not only erasing what you just typed, but also removing focus from the input.
- mdwalters 3y agoits because they're using autofocus
- carlotte 3y ago[dead]
- bdcravens 3y agoPrinciple of Least Astonishment "In user interface design and software design,[1] the principle of least astonishment (POLA), also known as principle of least surprise,[a] proposes that a component of a system should behave in a way that most users will expect it to behave, and therefore not astonish or surprise users." https://en.wikipedia.org/wiki/Principle_of_least_astonishment https://en.wikipedia.org/wiki/Principle_of_least_astonishmen... Such a feature would negatively affect accessibility, without some sort of accessible clue about where the cursor was moved.
- necovek 3y agoIt's perfectly possible to have sufficient a11y tags indicating where the cursor is: if anything, this would help accessibility, and a page which is solely there to accept OTP code being focused on the input field would not be at all surprising. Even without any a11y hint other than a field label, a11y tools and users would probably appreciate it just like regular user would: imagine a screen reader having to go through 20 menu items to get to the OTP code entry field.
- ttfkam 3y ago<input name="foo" type="text" autofocus> HTML takes care of the accessibility for you in this case. Going further, plain HTML is by and large 99.9% accessible. As developers—as uncomfortable as it may be to hear—we take a 99.9% accessible markup foundation and BREAK that accessibility with our CSS and JS choices, then run through hoops patching accessibility back in again with a hodgepodge of aria-role attributes and scripting hacks. Folks really don't get how much work went into plain old disrespected HTML. We just keep putting that fake brick wallpaper over real brick walls.
- ttfkam 3y agoA lot (the majority?) of web developers know their framework and how to script things but don't know that HTML has been able to do things like this out of the box for over a decade. Even IE 10 supported it. So much simpler and more reliable than using JavaScript. <input name="foo" type="text" autofocus> https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...
- naikrovek 3y agomore than two decades. I was setting my websites at work up to do this in 2001. it's amazing how many web developer don't know what browsers are capable of, and only consider what features the framework they're using has.
- Kuinox 3y agoAutofocus works only on page load and not when the input is injected later by JS.
- xigoi 3y agoSo why not have the input be there on page load?
- Kuinox 3y agoBecause when you do reactive web pages, they are not necessarly here on page load. I made a JS file explorer, to see files on the server from the browser. I wanted to mimic the windows explorer breadcrumb path bar. If you look at the behavior of the breadcrumb pathbar, you can't do that on page load, you have to replace the breadcrumb by an input text on clic, so not at page load. Yes theroically, you can fetch a whole new page for that, but it would imply fetching a new page from the server just for this: it doesn't make sense.
- herbst 3y agoI honestly don't know. But I believe one big reason why my SEO game seems always a bit better than others is because I learned and still practice to build websites user friendly. This starts by using the right tags for things (articles, section, header, ...) over autofocus, alt and title tags and even rel attributes. No magical js page builds. All my websites are screen reader friendly by default.
- NoZebra120vClip 3y agoWhile I normally feel like the designers don't care about accessibility, I feel like in this case, it may be a bit of a security issue. The site wants to do all they can to foil automation, for example, and if the caret isn't helpfully placed exactly where they need to start input, a human can figure that out better than a bot.
- ttfkam 3y agoIf your security is dependent on the ability of a bot to know which fields are available, why not go all the way? Make a canvas tag, draw the input fields, handle the text input, and completely thwart those bots! /s
- NoZebra120vClip 3y agoIn case you haven't heard, a very popular and effective way to foil spambots has been the inclusion of a hidden FORM field, which the user won't see and won't fill out. The bot dutifully fills out the field, sends an HTTP POST, and is busted for looking at the HTML source. Have a nice day.
- pwdisswordfishc 3y agohttps://javascript.plainenglish.io/goodbye-html-hello-canvas-part-1-92f750961666 https://javascript.plainenglish.io/goodbye-html-hello-canvas...
- eddd-ddde 3y ago
- alexchamberlain 3y agoI can get over that, but I've used a couple of websites where hitting enter in the code box doesn't submit the code and log you in - that is unforgivable.
- capableweb 3y agoSimilarly, disabling pasting a copied code.
- kiririn 3y agoAlso the sites that autosubmit once you’ve typed 6 characters, and worse still the sites that require you to login again from scratch if you typo the last character and it autosubmits
- EamonnMR 3y agoBlowing away the form on submission is the worst sin if form design. Only blow it away if it was accepted! I wonder if this is a deliberate (legal) submission reduction technique.
- MattGaiser 3y agoProbably closer to the PM didn't specify, the PO had a deadline, the Scrum Master wanted a lower estimate, the devs don't want to argue, and QA followed the acceptance criteria and didn't want to be seen as an impediment, especially since the devs had already surrendered.
- willsmith72 3y agoI love the auto submit on auth codes
- someweirdperson 3y agoThere's this one page that disables the login submit button until the password field is filled. The browser auto-fills, login still disabled. Need to manually add and then remove a character before the form can be submitted.
- mtmail 3y ago(From https://github.com/sveltejs/svelte/issues/6629#issuecomment-898497953 https://github.com/sveltejs/svelte/issues/6629#issuecomment-...) "The reason why autofocus should be generally avoided, is that it's messing up the focus order for screenreaders and similar assistive technologies. Additionally, logical "focus order" is also a success criterion on the official WCAG 2.0 accessibility guidelines by the W3C." https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechan...
- hulitu 3y agoSo that's why the only input field when you start a web browser ( the address bar) has no input focus. For accessibility. /s
- SanderNL 3y agoThis is ass-backwards. Screenreaders should handle autofocus properly or ignore it, not force the other 90% into (even deeper) insanity.
- throwaway1777 3y agoJust ignore the standard and do what’s best for the users.
- deleted 3y ago[deleted]
- cosmotic 3y agoThis might get you into a lawsuit if wcag is't followed. Or at least that's what the legal and accessibility team will think.
- appplication 3y agoAgree - wis there no additional layer of abstraction between autofocus and screen readers? Why is there such a dependency on this unrelated functionality? I’m inclined to see this is a failure of screen readers, and perhaps more broadly the standards on which they are based if they can’t handle what is a reasonable and common use case for normal web browsing.
- retrocryptid 3y agoThe web is not designed to be useful for any purpose. It is designed to demonstrate plausible "technologies" developed by companies whose investors want to sell them to other companies. Anything beyond basic WEB 1.0 is intended to be "plausible" instead of "useful."
- pictur 3y ago[flagged]
- eimrine 3y agoI needed 22 tab presses to achieve the comment field here w/o mouse and tab enter to send.
- brrtbrrt 3y ago[dead]
- al_be_back 3y agoa couple of reason not to focus: 1. on mobile devices, a focused <input> also triggers Keyboard to open, that in turn may cause the page/content to scroll suddenly etc. that could annoy the user, 2. if there's content to read (a message, Terms etc), the user may end up not fill the form at all
- mhb 3y agoIsn't that what the @media stuff is for?
- al_be_back 3y agouse @media to do what in this case? to not display the virtual keyboard on input.onfocus?
- mhb 3y agoDisable autofocus when using a device (mobile?) on which it is problematic? I'm no expert though. Maybe that isn't possible or is more undesirable for some other reason.
- al_be_back 3y agoYes [however] you could using props like <input inputmode='none'> or <input readonly='readonly'> and that prevents the device's virtual keyboard from opening 'onfocus'. however, that's not practical, if you want to type/enter data into it during that session.
- mhb 3y agoMaybe I'm not understanding the objective or the constraints. I thought the goal is to disable autofocus on mobile devices in order to prevent the appearance of the virtual keyboard from unexpectedly disturbing the layout. In order to achieve this why not use @media to identify a device which uses touch input (I'm sure there are some edge cases, but this seems like a good proxy for a mobile device) and javascript or jquery to disable autofocus?
- illamint 3y agoCynically, I feel like these details are often lost in the two-week sprint cycle or other realities of modern software development process. The Figma file didn't specify autofocus, the PM doesn't care about it, and the engineer just wants to close their ticket so they can move on to the next one. It's a login page, who cares? What revenue or business metric does it drive? Same reason the input field for the code doesn't have its input mode set to numeric (to show a numeric keyboard on mobile devices), and the same reason the email field doesn't have the email input mode set (to show the email input keyboard with @ and . prominently featured).
- fy20 3y agoIt's the same reason why links are not a tags. The dashboard of my company is a React app, but it has proper routing so opening a new tab at mycompany.com/account goes to your account. At the end of last year the menu was redesigned, and the links which were a tags were replaced with some other element. So now you can't ctrl click to open pages in new tabs, which was a big part of my workflow. Oh and the labels on the design of the new menu were removed, but of course there is no title tag to explain what the items are. I filed a bug report shortly after it was released, and it is - and probably for the rest of eternity will be - in the backlog.
- wruza 3y agoWhat bugs me most in these stories is that they are actively destroying what worked before. Barbarians with big frameworks. Their company pays them while they make the product worse and nobody notices. Even with user feedback, because instead of going to a solver, it goes to the problem itself.
- marklubi 3y ago> So now you can't ctrl click to open pages in new tabs, which was a big part of my workflow. I came across the exact opposite recently. With Ghostery enabled, one of the company owned websites won’t work with regular clicks. The only way to go to the link is to open in a new tab/window. Infuriating.
- 3y ago
- dimaor 3y agoSendgrid's lack of autofocus in the 2FA page is particularly annoying
- codingclaws 3y agoOne reason I don't see mentioned: you can't use keyboard shortcuts that use the backspace key.
- kiwijamo 3y agoUsing the backspace key to go back is a massive PITA in browsers that have that keybinding set. Have accidently lost form input by pressing backspace, so frustrating. Backspace should only delete a character in a form and not go to a different page.
- eddd-ddde 3y agoI never knew of any backspace shortcuts. Are you referring to one in specific?
- slinkyavenger 3y agoBackspace has traditionally been a back button shortcut. In a similar complaint, the current key combo to navigate back across all platforms doesn't perform that action when a textbox is focused.