How To Tweak The Keyboard For HTML5 Text Input Fields On iOS

16 April 2015Mobile App, Ionic

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 <input> fields.

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!

###Auto-Correct You can use the autocorrect attribute to control whether auto-correction should be enabled on <input type="text">, <input type="search"> or <textarea> fields.

By default auto-correction is on:

<input type="text" autocorrect="on" />

Turning auto-correction off:

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

###Auto-Capitalize You can use the autocapitalize attribute on <input type="text">, <input type="search"> and <textarea> elements.

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 sentences.

<textarea autocapitalize="sentences"></textarea>

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" />

###Forms 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>

###Android Unfortunately, these attributes do not work on Android. You can use JavaScript to modify the capitalization of the characters as the user types, but that will not influence the keyboard itself.