Wednesday 12 February 2020

HTML/JavaScript Autocomplete Attribute

  • The autocomplete attribute used for an input field should have autocomplete enabled or not.
  • Autocomplete allows the browser to predict the value based on history of browser.
  • When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values/history.
  • The autocomplete attribute works with the following  types: text, search, url, tel, email, password, date, range and color.
  • The autocomplete attribute sometime not working properly in some browser. So there are some work around as follows.
  1. Use value as 'block' instead of 'off' to disable autocomplete attribute at form level.
    i.e. <form action="" autocomplete="off">
    replace with <form action="" autocomplete="block">
  2. To support multiple browsers and one of browser not working properly, use following JavaScript. i.e. Let's assume Chrome not supporting autocomplete attribute out of all browsers.
    <script type="text/javascript"> if($.browser.chrome) { $(document).on('focus click tap', 'input', function() { $(this).attr("autocomplete", 'block'); }); } else { $(document).on('focus click tap', 'input', function() { $(this).attr("autocomplete", 'off'); }); } </script>
  3. Field level, suppose out off 10 fields some of them not supporting autocomplete 'off' attribute properly. Then we can use field level autocomplete attribute like as follow: i.e. <input type="text" id="name" path="name" autocomplete="name"/> or <input type="text" id="name" path="name" autocomplete="off"/> or <input type="text" id="name" path="name" autocomplete="block"/>
Note : The autocomplete attribute mostly working fine in all browser except Chrome browser.

HTML/JavaScript Autocomplete Attribute

The autocomplete attribute used for an input field should have autocomplete enabled or not. Autocomplete allows the browser to predict th...