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.)

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.)

• theme-development
• javascript
• wp-login-form

Share Improve this question edited Jun 26, 2019 at 19:31 RiddleMeThis 3,80788 gold badges2222 silver badges3030 bronze badges asked Jun 26, 2019 at 15:15 willfalconwillfalcon 3855 bronze badges 4

• 1 maybe its the timing of the JS? As a test you could put your code inside a setTimeout() or inside of $(window).load(). – RiddleMeThis Commented Jun 26, 2019 at 17:34
• I did try it in a docment.ready... i'll try those. – willfalcon Commented Jun 26, 2019 at 19:12
• That seems to have done it. I don't really know what the difference between $(document).ready() and $(window).load() is but there you go. The set timeout also worked, but seems less reliable. – willfalcon Commented Jun 26, 2019 at 19:22
• Glad it worked, I went ahead and moved my comment to answer. – RiddleMeThis Commented Jun 26, 2019 at 19:27

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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().