How to prevent focusing first input inside form when opening page on the mobile ?
Like in the title. I have application which when it is opened on mobile the first input inside form is focused and keyboard is displayed. I want to prevent this. The input does not have attribute autofocuse but it is focused still. Looking for some valid solution for this
3 Replies
you can try setting
tabindex="0" on the first actual focusable element in the page (eg a <button>, <a>, etc)
Be sure to use this as sparingly as possible though because if used incorrectly it can make your site unusable for keyboard navigators and assistive technologywhat about that i will attached focus event listener and on the first execution for this input detached it
can i make the whole page tabindex="0" ?
or whole div cotaining form ?
whichever element has
tabindex="0" will become focusable. generally it is a bad idea to do this for anything other than buttons, links, inputs, textareas, selects, or dialogs.
I would suggest going to the very first one of on your page and adding tabindex="0".
Adding a one-time listener for focus to the input and immediately detatching will result in desktop users clicking into the input, beginning to type, and then having to click in again after realising your one time event has kicked them out of the input.
You could add a check for the user agent, but then you would either only account for some desktop users, or only account for some mobile devices.
If you want to ensure it for all users, tabindex="0"
You may need to use tabindex="1" if 0 doesnt work. you can read more about it here https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex