This handy web browser bookmarklet will show you what autocomplete and autocorrect settings are set on a forms input fields.
Quickly analyze an HTML form to see what autocomplete and autocorrect attributes have been set for each input.
Autocomplete Analyzer Bookmarklet Code
1 | javascript:(function()%7B if(typeof jQuery=='undefined') { var headTag = document.getElementsByTagName("head")[0]; var jqTag = document.createElement('script'); jqTag.type = 'text/javascript'; jqTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'; jqTag.onload = analyzePage(); headTag.appendChild(jqTag); } else { analyzePage(); } function analyzePage() { var formIds = ""; jQuery( 'form' ).each( function(){ formIds += "\nID: " + this.id + " (name: " + this.name + ")"; }); var formId = prompt('Enter Form ID to Analyze.\n\nForms found on this page:' + formIds, ''); var tableData = []; function Field( field ) { this.type = ( typeof jQuery( field ).attr('type') == 'undefined' ? jQuery( field ).prop('tagName').toLowerCase() : jQuery( field ).attr('type') ); this.name = jQuery( field ).attr( 'name' ); this.id = jQuery( field ).attr( 'id' ); this.autocomplete = jQuery( field ).attr( 'autocomplete' ); this.autoccorrect = jQuery( field ).attr( 'autoccorrect' ); } jQuery('#' + formId + ' input, #' + formId + ' select, #' + formId + ' textarea').each(function(){ tableData.push( new Field( this ) ); }); console.table( tableData ); alert( 'Form autocomplete information has been displayed in the Dev Tools Console tab.'); } %7D)(); |
How to Install the Autocomplete Analyzer Bookmarklet
- Copy the above code.
- Create a new bookmark by right-clicking on the bookmark bar and choosing Add Page
- In the Name field, enter Autocomplete Analyzer
- In the URL field, paste the code (Ctrl + V)
- Click the Save button
How to Use the Autocomplete Analyzer Bookmarklet
- On any webpage with an HTML form, click your bookmarklet in the Bookmark bar.
- A prompt asks you to enter the ID of the HTML form you wish to analyze. A list of the forms found on the page will be listed. Click the OK button.
Enter an HTML ID you wish to analyze. - NOTE: This looks for input fields within an ID on the page – it technically doesn’t need to be a <form> element – it can be any element on the page.
- Pres F12 on your keyboard (or right click on the page and choose Inspect Element). This will open the Developer Tools panel.
- Select the Console tab in the developer tools panel.
- A table will be displayed with the forms Autocomplete and Autocorrect settings.
