dash_extensions_eventlistener_keyboard_event_capture.py

1from dash import Dash, html, Input, Output
2from dash_extensions import EventListener
3
4# Create example app.
5app = Dash(__name__)
6app.layout = html.Div([
7    EventListener(
8        id="event-listener",
9        children=[html.Input(id="input", type="text", placeholder="Type something...")],
10        events=[{"event": "keydown", "props": ["key", "ctrlKey"]}]
11    ),
12    html.Div(id="output")
13])
14
15@app.callback(
16    Output("output", "children"),
17    Input("event-listener", "event")
18)
19def update_output(event):
20    if event is None:
21        return "Press any key to see the event data"
22    return f"You pressed: {event['key']} (Ctrl: {event['ctrlKey']})"
23
24if __name__ == "__main__":
25    app.run_server()