focus() doesn't work inside colorbox pop-up

Question

I tried to use focus for first input field on the form. but it doesn\'t work. When I call attr(\"id\") for that input it worked. When I call focus f

Answer 1

You can also use

$.colorbox({ 

...,
trapFocus: false
});

to disable focus inside colorbox

Answer 2

You are all misunderstanding the question. When Colorbox opens you can't focus an input field?

...unless you add your focus to the Colobox onComplete key e.g.

$('#mydiv a').colorbox({ onComplete:function(){ $('form input:first').focus(); }});

You could also bind the focus to an event hook:

$('#mydiv a').bind('cbox_complete', function(){
        $('form input:first').focus();
});

That should be enough to get started.

Answer 3

use

$(document).ready(function() {
       // focus on the first text input field in the first field on the page
        $("input[type='text']:first", document.forms[0]).focus();
    });

Answer 4

It may be happening that when your colorbox is opened its focus goes onto the highest element i.e. body of page. use document.activeElement to find that focus went to which element. Then find iframe or id of your colorbox and then set focus on it

Answer 5

I've just stumbled on this problem.

I think it's best to have a single $.colorbox opener like this:

    function showActionForColorBox(
       _url,
       _forFocus
   ) {
   $.colorbox(
         {
            scrolling: false,
            href: _url,
            onComplete: function () {
               idColorboxAjaxIndect1.appendTo($('#cboxOverlay'));
               idColorboxAjaxIndect2.appendTo($('#cboxOverlay'));
               idColorboxAjaxIndect3.appendTo($('#cboxOverlay'));
               idColorboxAjaxIndect4.appendTo($('#cboxOverlay'));

               // --> Possible element's ID for focus
               if (_forFocus) {
                  $('#' + _forFocus).focus();
               }
               return;
            },
            onCleanup: function () {
               // TODO: ?
               return;
            },
            onClosed: function () {
               if (shouldReloadPageAfterColorBoxAction) {
                  // --> Should we reload whole page? 
                  shouldReloadPageAfterColorBoxAction = false; // NOTE: To be sure: Reset.
                  window.location.reload(false);
               }
               else if (cbEBillsActionReloadPopup) {
                  // --> Should we reload colorbox
                  cbEBillsActionReloadPopup = false;
                  showActionForColorBox(_url);
               }
               else if (cbShouldLoadAnotherContentAfterClosed) {
                  // --> Should we reload colorbox with custom content? 
                  cbShouldLoadAnotherContentAfterClosed = false;
                  $.colorbox({ html: setupContentForcbShouldLoadAnotherContentAfterClosed });
                  setupContentForcbShouldLoadAnotherContentAfterClosed = '';
               }
               return;
            }
         }
         );

   return;
}

Answer 6

Try the first selector,

$("form input:first").focus();

http://jsfiddle.net/erick/mMuFc/