If you're building hybrid apps or mobile websites, you probably already know that the keyboard on the device can be influenced by defining the correct
type for your
But did you also know that you can change the behaviour of the iOS keyboard, when it comes to auto-correction and auto-capitalization, with attributes? Let's have a look at how to do this!
You can use the
autocorrect attribute to control whether auto-correction should be enabled on
<input type="search"> or
By default auto-correction is on:
<input type="text" autocorrect="on" />
Turning auto-correction off:
<input type="text" autocorrect="off" />
You can use the
autocapitalize attribute on
<input type="search"> and
Completely disable automatic capitalization.
<input type="search" autocapitalize="none" />
Automatically capitalize the first letter of sentences. This is the default, so if you leave out the attribute or don't specify a value for autocapitalize it will default to
Automatically capitalize the first letter of words, perfect for input fields where you want the user to input their full name. This depends on your target audience though, it may not be common for names in other languages.
<input type="text" autocapitalize="words" />
Automatically capitalize all characters.
<input type="text" autocapitalize="characters" />
You can also define both these attributes on a
<form> element, all the input elements inside the form will inherit this setting. You can override the attribute on the input element itself.
<form autocapitalize="words" autocorrect="off" /> <input type="search" autocapitalize="none" /> <input type="text" /> <textarea autocapitalize="sentences" autocorrect="on"></textarea> </form>
Follow me on Twitter @ashteya and sign up for my weekly emails to get new tutorials.
If you found this article useful, could you hit the share buttons so that others can benefit from it, too? Thanks!