Thickbox Login should have focus

I second

Definitely agree with this request - thickbox is really slick when used to display the login box, but visitors can get tripped up since they would need to know to click in the first (username) box.

~jason

Just add document.getElementById("edit-name").focus(); (with script tags wrapped around it) inside the form_alter. I added a type = markup field to the form and stuck that script in there.

Can you elaborate on your post in the thickbox issues forum? I am interested in changing the focus to the username field, but I'm clueless as to what you said in your post. Where is form_alter and what is a type = markup field? Can you please post an example HTML form?

Thanks!

-edit-

In Firebug I can easily set focus to the field with this jQuery code:

$("#TB_window #edit-name")[0].focus();

My problem is to make in run when the popup opens.

rbishop could you paste in the exact code you are using in form_alter? I have tried different variations myself without success.

Seems to only work in Safari and breaks the thickbox for IE7
must be someway to focus the field this way

added this to the thickbox module in form_alter

    $form['login-forgot'] =  array('#type' => 'markup', '#value' => '<script>document.getElementById("edit-name").focus();</script><br/><br/><a href="javascript:;" onclick="forgotpass();">Forgot your password?</a>'); 

Tried all of the above, and still cannot get it to work on firefox. PLEASE HELP!!!

Any updates on this?

subscribing

ditto

This solution is bit of a hack but it seems to work on my test site. Please try it out and report back here.

The patch adds this to the form_alter hook. The timeout makes is run after the 100 milliseconds, if it's not working for you try to increase it to 500 or something. (There are 1000 milliseconds in one second.)

$form['login-focus'] = array(
      '#type' => 'markup',
      '#value' => '<script type="text/javascript">$(document).ready(function() { setTimeout(\'$("#TB_window #edit-name")[0].focus();\', 100); });</script>'
    );

Can the Focus module help in this situation?

It doesn't work

None of the suggestions above works, including the focus module.

this comment is about thickbox focus problem ( iframe mode ) not about drupal actually

i solved thickbox focus event problem like this:
i setted a function named "focus" that focus on "TB_iframeContent" , then textbox should be focused.
in this case i use a textbox with an id = "txtsearch"

in document ready function call this focus function with 100 ms delay
here is the code :
function focus(){
$("#TB_iframeContent").focus(); // here is the trick : first focus on iframe
$("#txtsearch").focus();
}

$(document).ready(function(){
setTimeout("focus();",100);
});

so i advice you to place this code on page will be open and dont forget include jquery.js

i hope this will be a solution for your drupal-thickbox problem.

volkiz -

can you specify excatly where to put this code in the module?

Tnx.

as i said this is general thickbox problem
im not using thickbox for login in drupal
but maybe we can try this :
in thickbox module line 121 change thicbox_login function like this:

function thickbox_login() {

$output="function focus(){";
$output.='$("#TB_iframeContent").focus();';
$output.='$("#txtsearch").focus();';
$output.="}";

$output.="$(document).ready(function(){";
$output.='setTimeout("focus();",100);';
$output.="});";
print output;
print drupal_get_form('user_login');
exit;
}

tell me if its work

Enclosed it in <script></script> and fixed the print line to be print $output; (the $ sign of the variable), even changed the field name but it doesn't work.

function thickbox_login() {
$output="

";
print $output;
print drupal_get_form('user_login');
exit;
}

check this login box will disappear onready state.
but if u change .hide(); to .focus(); id doesnt work.

besides drupal uses a modified version of thickbox (v3.0)
but i use this trick on thickbox (v2.1)
anyway its your turn ekrispin : )

enabled thickbox module.

enabled for login in admin/settings/thickbox

changed the function code for login as u mentioned..

but login is still like the old one. it do not hide .

any ideas??

I created a patch that adds focus the first form field of the modal ajax dialog of thickbox (which is used for the login) after 1000 ms (1 second). Also I added my recent bugfix of the translation problem of that modal ajax dialog to the patch.
For a *quick and dirty* manually fix add the following line to your thickbox.js on line 235:
window.setTimeout("document.forms[0].elements[0].focus()", 1000);

The snippet works perfectly for the thickbox-login, however it probably creates an error for modal ajax dialogs that do not contain any form elements. To address this issue I added a helper funtion that checks whether form[0].element[0] exists.

Use the thickbox_focus_only.patch iff you have already patched with my translation bugfix. (http://drupal.org/node/368080#comment-1332212)
Use thickbox_focus_and_translation_bugfix.patch instead to fix both, the issue that the modal dialog doesn't show correct translations as well as adding the focus feature.

Thanks for the patch jankoch, committed to 6-dev.

To expand on jankoch's solution and make it a bit more robust, I replaced the first-form selection with a more target jQuery selector. Attached is a patch against the 6-dev snapshot. This fixed my problem with having a 'search' box on the same page as a popup login box.

I have committed #26 from xxvelcrar to 6-dev so people can test it easily.

subscribing

Both fixes #23 and #25 do not work. No focus whatsoever in neither IE, FF nor Chrome.

See here for example - click on the "Log In" link (at the top-right area).

should this be set to 'fixed' if available in latest dev?
thanks!

volkiz, thank you! You solution helped me!