Hi Guys,
There are time when you would like to disable AutoCorrection, Spell checking, Auto Completion for your form fields. This is true when a field takes in values like names, addresses, phone numbers etc
Even though mobile browsers and desktop browsers offers these as features to help users to make less mistakes with their typing and all but as stated there are times when they MAY be less desirable.
Browsers such as Chrome, Firefox, Opera or even Internet Explorer helps developers out with disable these features, at form level and or at field level.
Oh and we can also add fourth attribute to equation called AutoCapitalize
Let me show you with an example but let me tell you about the property names first
- autocomplete
values: on|off - autocorrect
values: on|off - autocapitalize
values: on|off
- spellcheck
values: true|false
The Markup
1 2 3 4 5 |
<input type="text" name="name" placeholder="Please enter your name" autocomplete="off"/> <input type="text" name="street_type" placeholder="Please enter street type" autocomplete="off" autocorrect="off" spellcheck="false" /> <textarea cols="10" rows="8" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off"></textarea> <span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"></span> |
So the above will give us much to test on
you can also use these properties at form level as shown below
1 2 3 4 5 |
<form autocomplete="off" autocapitalize="off" autocorrect="off"> <input type="text" name="name" placeholder="Please enter your name" /><br> <input type="text" name="street_type" placeholder="Please enter street type" /><br> <textarea cols="10" rows="8" ></textarea> </form> |
Here is a quick demo
(Open this page in mobile browser and see if you can hit the nail with the demo provided)
http://jaspreetchahal.org/examples/html5/disable_form_features.html
I hope that this post was helpful. Just keep these properties in mind, at least if you know they exist you can use them at will and when most desired. You can prevent auto complete, auto correction, spell checking and auto capitalization just with ease.
Cheers.
Leave a Reply