Chrome auto-fills password but not username on bank website

Question

On my bank's website, direct.com, Chrome will auto-fill the password after I enter the username, but it doesn't auto-fill the username by itself.

I read in Chrome auto-fill username/passwords is inconsistant that this can happen if there are multiple usernames saved. I checked the Chrome Password Manager, and this isn't the case. Also, in my experience, when there are multiple usernames, clicking on the username field will display a menu of the remembered usernames. But that doesn't happen here.

The HTML for the username field is:

<input id="userid" maxlength="256" name="userid" type="text" class="formTextHeader placeholder" placeholder="USERNAME" value="" aria-label="User Name">

Is it because the name is userid rather than something more standard like username?

The form has autocomplete="off" set, but apparently Chrome ignores that because it's filling in the password.

It's been like this for years, through multiple MacOS and Chrome upgrades.

Answer 1

General solution

There is a cross-browser, cross-platform solution to some input-form problems that might help you as well. No addons required, but it takes 3 minutes and some html knowledge:

Adding a temporary fake form

Specific instructions here are for Chrome and Firefox (on Linux), but it should be extremely similar for other browsers and other platforms (for macOS replace Ctrl with Cmd).

1. Right click the input field (username) and select Inspect or Inspect element.
2. Remember or write down the value of name or id of that field. Repeat these steps also for the password input field.
3. Press Ctrl+Shift+C to select any element to replace it with a fake input field.
4. Press F2 to edit that element's source.
5. Press Ctrl+A to select the whole element's source.
6. Paste the following instead of the element's source:

<form method=post>
  <input name=IDENTIFIER>
  <input type=password name=PASSWORD>
  <input type=submit>
</form>

7. Replace IDENTIFIER and PASSWORD with the ones you got from step 2.
8. Press Ctrl+Enter to apply your changes. You can now close the developer menu.
9. Type your username and password into the 2 new input fields that appeared.
10. Click Submit. You might get an error or nothing visible might happen.
11. Now your browser should offer to save the credentials in a popup or maybe you need to click a key shaped button in the corner of the address bar to get that popup.

---

Original source with extra background here. Almost same answer to a different question here.

Answer 2

Chrome password were always problematic. I suggest you would do better to use a third-party password manager. This can help centralize your password and form-fields repository across all devices and all browsers.

My preferred is LastPass, and you will find it also as a Chrome add-on. You could in addition install the desktop version of LastPass on your computers and the LastPass app on your smartphone.

Answer 3

Specific solution:

You can always change the existing html with a userscript. To activate userscripts you need an addon like GreaseMonkey or Tampermonkey.

// ==UserScript==
// @name         Fix direct.com login issue
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Find all elements with the autocomplete attribute (at the login page) and change that attribute to "on".
// @author       Carolus
// @match        https://www.direct.com/index.cfm
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var allElements, thisElement;
    allElements = document.evaluate(
        '//*[@autocomplete]',
        document,
        null,
        XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
        null
    );
    for (var i = 0; i < allElements.snapshotLength; i++) {
        thisElement = allElements.snapshotItem(i);
        thisElement.setAttribute("autocomplete", "on");
    }
})();

This is my first ever userscript, cobbled together in 30 min, so it is not perfect. But it does enable you to choose the name and password as a dropdown option when you click on the input box and then follow it with another click or a downward arrow press. I couldn't figure out how to make it be filled out when you land on the page. But maybe someone can edit this answer to have an even better user script.