JavaScript Change focus to password field login page being reset

Question

I have a special situation where I want users on the standard WordPress login page enter a password. I'm filling in the username with a line of javascript:

document.getElementById('user_login').value = 'username';

By default the focus starts on the username field. I want to have the focus start on the password field...

document.getElementById('user_pass').focus();

but this isn't working. It looks like it might be focusing on the password field for a moment and then going back to the username field.

Any idea why this might be happening and how to fix it?

(I don't want to just hide the username field, I need actual admins to be able to login as usual. This special autofilled username only gets role access to one little part of the site. And I don't want to use a password protected page for other reasons.)

Answer 1

This sounds like a timing issue, there is probably already some JS running after your script is ran.

Try wrapping your JS in $(window).load(), this will run the function after other page assets have loaded and should fix the timing issue.

For example...

$(window).load(function() {
    document.getElementById('user_pass').focus();
});

Here is some info about the difference between $(document).ready() vs $(window).load().