键盘快捷键

在这个例子中,我们展示了如何为操作创建键盘快捷键。

¥In this example we show how to create a keyboard shortcut for an action.

我们从一个从服务器加载一些内容的简单按钮开始:

¥We start with a simple button that loads some content from the server:

<button class="btn primary" hx-trigger="click, keyup[altKey&&shiftKey&&key=='D'] from:body"
        hx-post="/doit">Do It! (alt-shift-D)</button>

请注意,按钮既响应 click 事件(通常),也响应按下 alt-shift-D 时的 keyup 事件。from: 修饰符用于监听 body 元素上的 keyup 事件,从而使其成为 “global” 键盘快捷键。

¥Note that the button responds to both the click event (as usual) and also the keyup event when alt-shift-D is pressed. The from: modifier is used to listen for the keyup event on the body element, thus making it a “global” keyboard shortcut.

你可以通过单击按钮或按 alt-shift-D 来触发下面的演示。

¥You can trigger the demo below by either clicking on the button, or by hitting alt-shift-D.

你可以在此处找到给定键盘快捷键所需的条件:

¥You can find out the conditions needed for a given keyboard shortcut here:

https://javascript.info/keyboard-events

Server Requests ↑ Show

🔗Demo