Focus() Doesn't Work Inside Colorbox Pop-up

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 for the same input, I didn't see

Solution 1:

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.

Solution 2:

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();
    });

Solution 3:

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

Solution 4:

Try the first selector,

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

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

Solution 5:

I've just stumbled on this problem.

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

functionshowActionForColorBox(
       _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 focusif (_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);
               }
               elseif (cbEBillsActionReloadPopup) {
                  // --> Should we reload colorbox
                  cbEBillsActionReloadPopup = false;
                  showActionForColorBox(_url);
               }
               elseif (cbShouldLoadAnotherContentAfterClosed) {
                  // --> Should we reload colorbox with custom content? 
                  cbShouldLoadAnotherContentAfterClosed = false;
                  $.colorbox({ html: setupContentForcbShouldLoadAnotherContentAfterClosed });
                  setupContentForcbShouldLoadAnotherContentAfterClosed = '';
               }
               return;
            }
         }
         );

   return;
}