set focus on user login form

By solar3000 on 3 Aug 2010 at 15:24 UTC

In www.yoursite.com/yourDrupalInstall/user there is a form with a "login" and "password".
How do you set focus to it?

As you probably know, drupal generates this form tag:

<form action="/yourfolder/node/12345"  accept-charset="UTF-8" method="post" id="user-login">
...
<input name="name" ....>

There's no "name=..." parameter for the form. How do I get to the text box?

I've tried document.<form>.name.focus().
The form has no name.

Comments

You can

nevets commented 3 August 2010 at 16:05

You can use

$('#edit-name').focus();

You can add it to the page with

drupal_add_js("$('#edit-name').focus();", 'inline');

For a more general solution that puts the focus on the first input for the first form in the main content area you can try something like

$('#main-group').find('form:first').find('input:first').focus();

You would need to replace #main-group with the id (or class) your theme uses for the main content area.

What is this called? What

solar3000 commented 3 August 2010 at 17:34

What is this called? What keywords so I can research further.
Thanks.

If you mean, "what is the

nevets commented 3 August 2010 at 18:08

If you mean, "what is the code", that is jQuery.

Updated answer

jo_as_neo commented 8 September 2016 at 18:01

Here is what worked for me (six years after nevets' answer) :

drupal_add_js(
    "jQuery(document).ready(function () { $('#edit-name').focus(); });",
    array('type' => 'inline', 'scope' => 'footer')
);

Based on https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_...

What's your take on

solar3000 commented 3 August 2010 at 18:50

What's your take on getElementById:

   window.onload = setFocus;

    function setFocus(form) {
        var elem = document.getElementById("login-box");

        elem.focus();

        return true;
    };

1) The recommendation is not

nevets commented 3 August 2010 at 19:32

1) The recommendation is not to use window.onload when using jQuery (which Drupal does)

2) The jQuery code "works" even if the element is not present, in this case, "works" means without error, yours will show an error.

3) Lets see you do the general solution with getElementById :)

I know this is an old thread, but...

JSCSJSCS commented 30 May 2012 at 01:12

I am struggling with this very issue. I have an exposed filter in a views content pane that is displayed in a panel pane. The target input is this:

<input type="text" id="edit-distance-postal-code" name="distance[postal_code]" value="" size="60" maxlength="16" class="form-text error">

I have tried several variations of the suggested drupal_add_js code and placed it in several locations (various .tpl files, hook_form_alter functions, etc), all to not avail.

Any assistance greatly appreciated!