Home/ Questions/Q 8547041
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T13:10:41+00:00

Suppose you have the following structure in your HTML and some elements inside the

  • 0

Suppose you have the following structure in your HTML and some elements inside the content div have various key (press, up, down) events:

<html>
<head></head>
<body>
    <div id="content">All the content</div>
</body>
</html>

You add an absolute positioned div by jQuery:

$('body').append('<div id="lightbox">etc.</div>');

How can you temporarily (during the existance of the lightbox) prevent all keyboard events from being caught by or bubbled to only $('#content') and its children, so that the bubbling order when the lightbox exists for the above structure will be

  1. $('#lightbox *')
  2. $('#lightbox')
  3. $('body')
  4. $('html')

whereas it will be

  1. $('#content *')
  2. $('#content')
  3. $('body')
  4. $('html')

when the lightbox is gone?

EDIT: Here’s some extra info.

  • I can’t make all the form elements disabled or readonly (this applies to limited elements anyway) because lightbox may occasionally exist on top of many form elements that have already assigned unique key events.

  • Also, I want key events to affect window + (lightbox, if any, otherwise content) so I can’t just stop all event propagation directly

  • The orders above can be 4-1 instead of 1-4, it doesn’t matter. What matters is to bypass the contents of this specific element (lightbox or content acc. to the situation) in key events.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I could not find any reliable solution so I chose to write my own function(s). Although I’m not much happy messing up with it, I had to control the behavior of the TAB key and create global keyup/keydown functions.

    For those interested I found some resources in SO, here, here and here.

    Note that I’m assigning a CSS class named “disabled” to the anchors in my script so you can consider those that you’ll see in my code like disabled="disabled" attribute of applicable elements. Also, I could not find a way to make it focus out from the html content into the selectable UI elements of the browser but that’s probably the last concern.

    // lightbox keyboard navigation
function getFocusList() {
    return $('body,#lightbox *:visible').filter(function(idx,elm) {
        if ($(elm).is('body')) return true;
        if (/^hidden$/i.test($(elm).css('visibility'))) return false;
        return (
            (/^a(rea)?$/i.test(elm.nodeName) && $(elm).hasAttr('href') && !$(elm).is('.disabled')) ||
            (/^(input|textarea|button|select)$/i.test(elm.nodeName) && !$(elm).prop('disabled')) ||
            (/^\d+$/.test($(elm).prop('tabindex')) && !$(elm).prop('disabled') && !$(elm).is('.disabled'))
        )
    });
}
function globalKeyDown(e) {
    var
        LB          = !!$('#lightbox').length,
        isTAB       = e.which == 9,
        isSHIFT     = e.which == 16,
        SHIFT_ON    = LB && typeof $('#lightbox').data('SHIFT_ON') != 'undefined'
    if (isSHIFT && LB) $('#lightbox').data('SHIFT_ON',true);
    if (!isTAB || !LB) return;
    var focusList = getFocusList(), nextIndex;
    var curIndex = $.inArray($(this).get(0),focusList);
    if (SHIFT_ON) nextIndex = --curIndex == 0 ? focusList.length - 1 : curIndex;
    else nextIndex = ++curIndex == focusList.length ? (focusList.length > 1 ? 1 : 0) : curIndex;
    var next = $(focusList[nextIndex]);
    e.preventDefault();
    e.stopImmediatePropagation();
    next.focus();
}
function globalKeyUp(e) {
    var
        LB          = !!$('#lightbox').length,
        isSHIFT     = e.which == 16,
        SHIFT_ON    = LB && typeof $('#lightbox').data('SHIFT_ON') != 'undefined'
    if (isSHIFT && SHIFT_ON) $('#lightbox').removeData('SHIFT_ON')
}

$.fn.extend({
    hasAttr:function(attrStr) {
        var res = true;
        $(this).each(function() {
            if (typeof $(this).attr(attrStr) == 'undefined') res = false;
        });
        return res;
    }
});
$(document).ready(function() {
    $('body')
    .on('focus','#lightbox a',function() {$(this).addClass('hover')})
    .on('blur','#lightbox a',function() {$(this).removeClass('hover')})
    .on('keydown','*',globalKeyDown).on('keyup','*',globalKeyUp)
    .on('keydown',globalKeyDown).on('keyup',globalKeyUp)
    // remaining jQuery code...
});

    I hope this saves some time for others with a similar issue.

    • 0