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

Answers:

Answer

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

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

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

Try the first selector,

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

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

Answer

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

You can also use

$.colorbox({ 

...,
trapFocus: false
});

to disable focus inside colorbox

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.