Keydown event is lost when opening modal

1

I have a slide created with the library blueimp.js On the slide I need to read when the user presses the B or C key. So far so good, the detail is that when you open and close a modal, you lose the reading of the keydown event and it is only activated again when I restart the Slide.

I leave my code that I use:

// Ejecutar Slide
initSlide: function(){
    let that = this;
    $('#links').click(function(event){
        let options = {
                index: link,
                onopen: function(){
                    that.opts.readKeydown = true;
                },
                onslideend: function(index, slide){
                    that.keyDownReader(index);
                },
                onclose: function(){
                    that.opts.readKeydown = false;
                },
            };

        blueimp.Gallery(links, options);
    });
},

// Ejecutar cuando usuario pulse las teclas B:66 y C:67
keyDownReader: function(index){
    let that = this;
    console.log(index, that.opts.readKeydown);
    $('#links').keydown(function(event) {
        event.preventDefault();
        if (that.opts.readKeydown) {
            switch (event.which || event.keyCode) {
                case 66: // b --> Checkbox Book
                    $('modalB').modal('show');
                  break
                case 67: // c --> Checkbox Cover
                    $('modalC').modal('show');
                  break
            }
        }
    });
},

I hope someone can help me, to know why the event is lost. First of all, Thanks! NOTE: If you have more details, just ask.

    
asked by LuiscYm 14.05.2018 в 20:45
source

1 answer

1

R E S U E L T O

I only had to read the event from $ (document.body) and not in $ ('# links'), because when I open and close the modal the focus is returned to the body.

$(document.body).keydown(function(event) {
  event.preventDefault();
  if (that.opts.readKeydown) {
      switch (event.which || event.keyCode) {
          case 66: // b --> Checkbox Book
              $('modalB').modal('show');
            break
          case 67: // c --> Checkbox Cover
              $('modalC').modal('show');
            break
      }
  }});
    
answered by 17.05.2018 / 18:22
source