codeup-web-exercises/keyEvents.html at main · CoJUr/codeup-web-exercises · GitHub

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>

    //keydown
    $('document').keydown(function (e) {
        //report values from key to event to page
        //have access to e.key and e.keycode  -- look at keyboard events in MDN
        var values = "key: " + e.key + " KeyCode: " } e.keyCode();

        $('#keydownValue').get(0).innerText = values;

    })

    //keyup - no longer pressing the key
    $('document').keyup(function (e) {
        var values = "key: " + e.key + " KeyCode: " + e.keyCode();

    $('#keyupValue').get(0).innerText = values;
    // $('#keyupValue').text(values)   the full jQuery way

    })

    //keypress - the whole event. doesnt track special modifier keys - ctrl, shift, alt, enter
    $('document').keypress(function (e) {
        // adding to the end of a string
        var keyPress = $('#keypressValue')

        keyPress.text(keyPress.text() + e.key)
    })


    // off
    //can remove one or more event values based on the selector or on the type
    // document.removeEventListener("click", handlerEvent)

    // $('#keypress').off('click', handlerOut)
    $(document).off('click') // to remove all of them

    var iskeypressOn = true
    var isKeyUpOn = true
            //disable keylogger button
        $('#buttonContainer > button:nth-of-type(1)').click(function () {

;
            $(document).off('keypress')


        })


    $('#buttonContainer > button:nth-of-type(2)').click(function() {
        $(document).off('keyup');
    })
    $('#buttonContainer > button:nth-of-type(3)')


</script>
</body>
</html>