JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" id="frm">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="text" name="email" /><br />
  Phone: <input type="text" name="phone" /><br />
  Address: <input type="text" name="address" /><br />
</form>

JavaScript

//This is one fucking hackish piece of code. Please encourage the Chromium group to FIX THIS FUCKING BUG http://code.google.com/p/chromium/issues/detail?id=46543

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

    //must clear the contents of the element on focus or the Chrome autocomplete monstrosity doesn't respond to the 'input'event since it may already have pre-populated content from before.
    $(document).on('focus', '#frm > input', function(){
       $(this).val(''); 
    });

    //listen for the input event, meaning autocomplete may have occurred
    $(document).on('input', '#frm > input', function(){

         //setTimeout is critical because it delays the rendering engine by a frame so that the following selector grabs all valid -webkit-autofill inputs            
        setTimeout(function(){
            $('input:-webkit-autofill').each(function(){

                var val = $(this).val(),
                    attributes = $(this)[0].attributes,
                    el = $('<input>');

                //we make an entirely new element and copy all of the old attributes to it. jQuery doesn't offer a native way to do this.
                for(var i=0; i<attributes.length; i++){
                     el[0].setAttribute( attributes[i].nodeName, attributes[i].nodeValue );
                }
                //set the autocompleted value to the new element
                el.val( val );
                
                //insert the new element then remove the old one.
                $(this).after(el).remove();

            });

        },0);

    });
 


}