{"id":1637,"date":"2018-06-19T21:40:41","date_gmt":"2018-06-19T15:40:41","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=1637"},"modified":"2018-06-19T21:40:41","modified_gmt":"2018-06-19T15:40:41","slug":"html-form-autocomplete-analyzer-bookmarklet","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/html-form-autocomplete-analyzer-bookmarklet\/","title":{"rendered":"HTML Form Autocomplete Analyzer Bookmarklet"},"content":{"rendered":"

This handy web browser bookmarklet will show you what autocomplete and autocorrect settings are set on a forms input fields.<\/p>\n

 <\/p>\n

\"Autocomplete<\/a><\/p>\n

Quickly analyze an HTML form to see what autocomplete and autocorrect attributes have been set for each input.<\/p>\n

Autocomplete Analyzer Bookmarklet Code<\/h2>\n

 <\/p>\n

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)();<\/pre>\n
 <\/p>\n
How to Install the Autocomplete Analyzer Bookmarklet<\/h2>\n
    \n
  1. Copy the above code.<\/li>\n
  2. Create a new bookmark by right-clicking on the bookmark bar and choosing\u00a0Add Page<\/strong><\/li>\n
  3. In the\u00a0Name <\/strong>field, enter\u00a0Autocomplete Analyzer<\/strong><\/li>\n
  4. In the\u00a0URL<\/strong> field, paste the code (Ctrl + V)<\/li>\n
  5. Click the\u00a0Save<\/strong> button<\/li>\n<\/ol>\n
     <\/p>\n
    How to Use the Autocomplete Analyzer Bookmarklet<\/h2>\n
      \n
    1. On any webpage with an HTML form, click your bookmarklet in the Bookmark bar.<\/li>\n
    2. A prompt asks you to enter the ID of the HTML form you wish to analyze.\u00a0 A list of the forms found on the page will be listed.\u00a0 Click the OK button.\n