On Key Stroke

Listens for a keyboard key being stroked.

Usage

<script>
    import { onKeyStroke } from "@sveu/browser"

    onKeyStroke(["w", "W", "ArrowUp"], (e) => {
        // Do something
    })
</script>
<script>
    import { onKeyStroke } from "@sveu/browser"

    onKeyStroke(["w", "W", "ArrowUp"], (e) => {
        // Do something
    })
</script>
svelte

Example

Use the arrow keys or w a s d keys to control the movement of the ball.
<script>
    import { onKeyStroke } from "@sveu/browser"

    let translate_x = 0

    let translate_y = 0

    onKeyStroke(["w", "W", "ArrowUp"], (e) => {
        translate_y -= 10
    })

    onKeyStroke(["s", "S", "ArrowDown"], (e) => {
        translate_y += 10
    })

    onKeyStroke(["a", "A", "ArrowLeft"], (e) => {
        translate_x -= 10
    })

    onKeyStroke(["d", "D", "ArrowRight"], (e) => {
        translate_x += 10
    })
</script>

<div>
    <div class="container border-base">
        <div
            class="ball"
            style="transform: translate({translate_x}px, {translate_y}px)">
        </div>
    </div>
    <div class="mt-4 text-center">
        Use the arrow keys or w a s d keys to control the movement of the ball.
    </div>
</div>

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 400px;
        height: 100px;
        margin: auto;
        overflow: hidden;
        border: 1px solid #a1a1a130;
        border-radius: 5px;
    }

    .ball {
        width: 16px;
        height: 16px;
        background: #a1a1a1;
        border-radius: 50%;
    }
</style>
<script>
    import { onKeyStroke } from "@sveu/browser"

    let translate_x = 0

    let translate_y = 0

    onKeyStroke(["w", "W", "ArrowUp"], (e) => {
        translate_y -= 10
    })

    onKeyStroke(["s", "S", "ArrowDown"], (e) => {
        translate_y += 10
    })

    onKeyStroke(["a", "A", "ArrowLeft"], (e) => {
        translate_x -= 10
    })

    onKeyStroke(["d", "D", "ArrowRight"], (e) => {
        translate_x += 10
    })
</script>

<div>
    <div class="container border-base">
        <div
            class="ball"
            style="transform: translate({translate_x}px, {translate_y}px)">
        </div>
    </div>
    <div class="mt-4 text-center">
        Use the arrow keys or w a s d keys to control the movement of the ball.
    </div>
</div>

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 400px;
        height: 100px;
        margin: auto;
        overflow: hidden;
        border: 1px solid #a1a1a130;
        border-radius: 5px;
    }

    .ball {
        width: 16px;
        height: 16px;
        background: #a1a1a1;
        border-radius: 50%;
    }
</style>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
Click fold/expand code

API

Arguments

Name Description Type Required
key The key to listen for. string or string[] or functionor true Yes
handler The handler to call when the key is stroked. (event: KeyboardEvent) => void Yes

NOTE
  • string - The key to listen for. E.g. "Shift".
  • string[] - The keys to listen for. E.g. ["Shift", "Control"].
  • function - A function that returns true if the key should be listened for.
  • true - Listen for any key.


Options

Name Description Type Default
target The target to listen on. EventTarget window
event The event to listen for. string keydown
passive Whether the event listener is passive. boolean false
Last update at: Invalid Date