Keyboard shortcuts and disabling autocorrect on HTML inputs

Today my fellow Envatonaut Jordan suggested adding autocapitalize="off" and autocorrect="off" to HTML text inputs.

I replied that doing so might have an adverse effect on people like me who use iOS keyboard shortcuts (Settings > General > Keyboard) heavily. For example, I have bbbb set as a shortcut for bensmithett and @@ as a shortcut for my email.

It makes filling out login/signup forms on my phone much less painful. I get pretty annoyed now when I try to fill out a form with bbbb and it doesn’t autocorrect.

I assumed that, because the UI for shortcuts on iOS is the same as that for autocorrect - the complete word appears above the cursor as you’re typing, you hit space to accept - they’d be equally affected by these attributes on input fields.

I was wrong!

It turns out that this field…

<input type="text" autocorrect="off" autocapitalize="off" />

… will still autocorrect words you have set up in iOS keyboard shortcuts. Email inputs work too.


Other devices

I’ve only tested this on an iPhone with iOS 7. If you have another device handy try on this CodePen and let me know the results, I’ll update this post.