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 any result. I also tried to use native Javascript. Does anyone know how to fix that?

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 any result. I also tried to use native Javascript. Does anyone know how to fix that?

• javascript
• jquery
• colorbox

6 Answers 6

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.

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

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

Try the first selector,

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

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

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

You can also use

$.colorbox({ 

...,
trapFocus: false
});

to disable focus inside colorbox