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?"