screenkeyboard/test.html at main · neknaj/screenkeyboard · 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<script src="flickinput.js"></script>
<meta charset="utf-8">
<textarea id="output" style="width: 100%;height: 50dvh;font-size: 50px;"></textarea>
<canvas id="flick" style="border: 1px solid;"></canvas>
<script>
    const label = [
        [
            [""],
            ["あ","い","う","え","お"],
            ["か","き","く","け","こ"],
            ["さ","し","す","せ","そ"],
            [""],
        ],
        [
            [""],
            ["た","ち","つ","て","と"],
            ["な","に","ぬ","ね","の"],
            ["は","ひ","ふ","へ","ほ"],
            [""],
        ],
        [
            [""],
            ["ま","み","む","め","も"],
            ["や","(","ゆ",")","よ"],
            ["ら","り","る","れ","ろ"],
            [""],
        ],
        [
            [""],
            ["⇄","゛","小","゜",""],
            ["わ","を","ん","ー","～"],
            ["、","。","！","？","…"],
            [""],
        ],
    ]
    // const label = [
    //     [
    //         [""],
    //         [""],
    //         ["A","B","C"],
    //         ["D","E","F"],
    //         [""],
    //     ],
    //     [
    //         [""],
    //         ["G","H","I"],
    //         ["J","K","L"],
    //         ["M","N","O"],
    //         [""],
    //     ],
    //     [
    //         [""],
    //         ["P","Q","R","S"],
    //         ["T","U","V"],
    //         ["W","X","Y","Z"],
    //         [""],
    //     ],
    //     [
    //         [""],
    //         [""],
    //         [""],
    //         [""],
    //         [""],
    //     ],
    // ]

    window.onresize = ()=>{
        FlickInput(document.querySelector("#flick"),label,Math.min(window.innerWidth,700),Math.min(window.innerHeight*0.4,700),4,5);
    }
    FlickInput(document.querySelector("#flick"),label,Math.min(window.innerWidth,700),Math.min(window.innerHeight*0.4,700),4,5);

    document.querySelector("#flick").addEventListener("flick",(e)=>{
        console.log("input",e.detail.btnnum,e.detail.label);
        output.value += e.detail.label;
    })
</script>
<style>
    * {
        color-scheme: dark;
        user-select: none;
        -webkit-user-select: none;
    }
    #flick {
        touch-action: none;
        position: absolute;
        transform: translateX(-50%);
        bottom: 0px;
        left: 50%;
    }
</style>