htmlcssmobile-safarimobile-chrome

Prevent iOS Safari from capitalizing the first letter of inputs


I have a case sensitive username field in my web app. In most instances, it works fine. Unfortunately, Safari on iOS and Chrome (sometimes) on Android want to "help" by capitalizing the first letter of any text entered into the input.

Since this is an <input type="text"> the first input letter is uppercase on those devices. This is driving users nuts as it takes a lot of effort to override and some don't even notice the change but it causes login to fail.

I can't simply say string.toLowercase() in my javascript since users are allowed to have mixed case logins. I just want the browsers to stop deciding which letters to make uppercase...


Solution

  • As I was typing this a friend pointed me to HTMLInputElement Autocapitalize="off" and that seems to do the trick very easily.

    Turns out that this can be included with autocomplete="off" to mostly control how mobile browsers deal with inputs.

    So basically <input type="text" autocapitalize="off" required placeholder="username" /> solves my specific problem.

    According to iOS and Android docs this doesn't always work but it should solve the majority of problems.

    Bonus: This isn't an all or nothing setting like allowing zoom. You can apply it selectively to inputs where it's needed and allow inputs that need more of a "copy" style content to continue helping the user.