Skip to content Skip to sidebar Skip to footer

How To Have A Page Support To Typing Keyboard To Launch A Modal?

This link would launch a jupyter notebook. When the page is loaded, typing h, would launch a modal ('Keyboard shortcuts') typing f, would launch another modal 'Find and Replace

Solution 1:

You are wiring the event incorrectly. With jQuery, use on() to wire the event and provide the selector for your target element in the second argument:

<head><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>
    i = 0;
    $(document).on('keyup', '#mydiv', function(e) {
      $("span").text(i += 1);
    })
  </script></head><body><divclass="container"id="mydiv"tabindex="0"><p>Keypresses: <span>0</span></p></div></body>

Of course, remember to click inside the element before you start typing. Now, if you want to know what key was pressed, you can use e.key. That's good if you want to get the characters, but if you want to implement shortcuts, it's better to use e.keyCode:

<head><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>
    $(document).on('keyup', '#mydiv', function(e) {
      $("span").text(e.key + " (" + e.keyCode + ")");
    })
  </script></head><body><divclass="container"id="mydiv"tabindex="0"><p>Keypresses: <span>0</span></p></div></body>

Solution 2:

maybe you should try this

    document.addEventListener('keyup', function (event) {
            if (event.defaultPrevented) {
                return;
            }

            var key = event.key || event.keyCode;
            console.log(key); // which "key" is the key you clicked on// Then you should test which key is clicked so you can do whatever you want like soif(key == 'Esc'){
              //Do the magic

            }
        });

Post a Comment for "How To Have A Page Support To Typing Keyboard To Launch A Modal?"