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

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!


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


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


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>


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.

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!

comments powered by Disqus