Squash Tomato Journal — December 04, 2017–08:40
Published in
1 min readDec 5, 2017
- A user reported some issue with the way labels were working on input fields — essentially, I wasn’t listening for the right events for users to tab through inputs, so I updated it with the following code:
- In Safari, and sometimes Firefox, the top label of any form wouldn’t rise on load even though the input’s html tag had “autofocus” set. I found out that autofocus works like this: on desktop, autofocus fires a focus event and sets focus AND the cursor in the designated input field; however, on mobile, autofocus ONLY sets the cursor in the designated input field and doesn’t fire a focus event, because triggering a mobile device’s keyboard is a strict rule that literally cannot be broken. Therefore, If I removed the autofocus from the html inputs, I then had a consistent experience across all devices and browsers.
