Adds hotkey element

main.py

@@ -390,4 +390,8 @@ with example(get_decorator):
 
     ui.link('Try yet another route!', '/another/route/1')
 
+with example(ui.hotkey):
+    ui.hotkey(key='f', on_keydown=lambda: ui.notify('F key was pressed.'))
+    ui.label('Hover over this square and press the F key.')
+
 ui.run(port=8080)

nicegui/elements/hotkey.js

@@ -0,0 +1,37 @@
+Vue.component('hotkey', {
+	template: `<span v-bind:id="jp_props.id" :class="jp_props.classes" :style="jp_props.style"></span>`,
+	methods: {
+		add_event_listener_to_parent() {
+			const id = this.$props.jp_props.id.toString();
+			const element = document.getElementById(id);
+			const parent = element.parentNode;
+			const key = this.$props.jp_props.options.key;
+			const props = this.$props;
+			parent.tabIndex = 0;
+			parent.addEventListener('mouseover', function (e) {
+				parent.focus();
+			});
+			parent.addEventListener('keydown', function (e) {
+				if (parent === document.activeElement) {
+					if (e.key === key) {
+						send_to_server(
+							{
+								'event_type': 'onKeydown',
+								'id': props.jp_props.id,
+								'page_id': page_id,
+								'websocket_id': websocket_id
+							},
+							'event'
+						);
+					}
+				}
+			});
+		}
+	},
+	mounted() {
+		this.add_event_listener_to_parent();
+	},
+	props: {
+		jp_props: Object
+	}
+});

nicegui/elements/hotkey.py

@@ -0,0 +1,28 @@
+from typing import Callable
+
+from .custom_view import CustomView
+from .element import Element
+from ..utils import handle_exceptions, provide_arguments
+
+
+class HotkeyView(CustomView):
+
+    def __init__(self, key: str, on_keydown: Callable):
+        super().__init__('hotkey', __file__, key=key)
+        self.on_keydown = on_keydown
+        self.allowed_events = ['onKeydown', ]
+        self.style = 'display: none'
+        self.initialize(temp=False, onKeydown=handle_exceptions(provide_arguments(on_keydown)))
+
+
+class Hotkey(Element):
+
+    def __init__(self, key: str, on_keydown: Callable = None):
+        """Hotkeys
+
+        Adds a hotkey action to an element.
+
+        :param key: the character that the action should be associated with, e.g. 'f'
+        :param on_keydown: callback to be executed when the specified key is pressed while the parents is active
+        """
+        super().__init__(HotkeyView(key=key, on_keydown=on_keydown))

nicegui/static/templates/main.html

@@ -59,7 +59,7 @@
         }
 
         socket.addEventListener('open', function (event) {
-            console.log('Webocket opened');
+            console.log('Websocket opened');
             socket.send(JSON.stringify({'type': 'connect', 'page_id': page_id}));
         });
 

nicegui/ui.py

@@ -36,6 +36,7 @@ class Ui:
     from .elements.row import Row as row
     from .elements.column import Column as column
     from .elements.card import Card as card
+    from .elements.hotkey import Hotkey as hotkey
     from .elements.card import CardSection as card_section
 
     from .timer import Timer as timer