如何为输入键盘以启动模态提供页面支持? [英] How to have a page support to typing keyboard to launch a modal?
问题描述
此链接将启动一个jupyter笔记本.
页面加载后，
键入 h ，将启动模式(键盘快捷键")
键入 f ，将启动另一个模式查找和替换"
如何在键入键盘以启动模式时获得页面支持?
此链接给出了模态内的一些启发.
这和 如何使此代码起作用? 您错误地连接了事件.使用jQuery，使用
当然，请记住在开始输入之前在元素内部单击.现在，如果您想知道按下了什么键，可以使用
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" How to have a page support to typing keyboard to launch a modal? This link gives some inspiration inside modal. This and this give examples about a single element, although I am asking an approach to listen keypress event on whole page Here is my code which is trying to listen any keypress How to make this code work? You are wiring the event incorrectly. With jQuery, use
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
这篇关于如何为输入键盘以启动模态提供页面支持?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！on()连接事件并在第二个参数中提供目标元素的选择器:
<head>
<script src="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>
<div class="container" id="mydiv" tabindex="0">
<p>Keypresses: <span>0</span></p>
</div>
</body> e.key.如果要获取字符，那很好，但是如果要实现快捷方式，最好使用e.keyCode:
<head>
<script src="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>
<div class="container" id="mydiv" tabindex="0">
<p>Keypresses: <span>0</span></p>
</div>
</body> question
<!DOCTYPE html>
<html>
<head>
<script>
i = 0;
$(document).querySelector('#myDiv').addEventListener('keyup', function (e) {
$("span").text(i += 1);
})
</script>
</head>
<body>
<div class="container" id="mydiv" tabindex="0">
<p>Keypresses: <span>0</span></p>
</div>
</body>
</html>
on() to wire the event and provide the selector for your target element in the second argument:<head>
<script src="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>
<div class="container" id="mydiv" tabindex="0">
<p>Keypresses: <span>0</span></p>
</div>
</body>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>
<script src="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>
<div class="container" id="mydiv" tabindex="0">
<p>Keypresses: <span>0</span></p>
</div>
</body>
