plaything/example/keyboard.html at master · Andself/plaything · 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
91
92
93
94
95
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Pragma" content="no-cache, no-store, must-revalidate, max-age=0">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <title>Andself</title>
  <style>
    body {
      text-align: center;
    }
    #app span {
      display: inline-block;
      color: #666;
      width: 52px;
      height: 52px;
      border: 1px solid #666;
      border-radius: 4px;
      line-height: 52px;
      margin: 3px;
    }
    #app span.active {
      color: #fff;
      border-color: #f4f4f4;
      background: #000;
      box-shadow: 0 0 10px 3px #333;
    }
    span.active:before {
      content: attr(data-key);
      position: fixed;
      width: 60px;
      height: 60px;
      z-index: 9;
      left: 50%;
      bottom: 50%;
      transform: translate(-50%, -50%);
      background: #f4f4f4;
      border: 1px solid #000;
      border-radius: 6px;
      line-height: 60px;
      color: #000;
      font-size: 32px;
    }
    .capital span {
      text-transform: uppercase;
    }
    .capital span.active:before {
      border-color: #569ae6;
      color: #569ae6;
    }
  </style>
</head>
<body>
  <div id="app"></div>

  <!-- script -->
  <script>
    const app = {
      keys: 'qwertyuiop asdfghjkl zxcvbnm',
      box: document.getElementById('app'),
      buttons: null,
      init: () => {
        app.keys.split('').forEach( el => {
          if (/\s/.test(el)) {
            let br = document.createElement('br')
            app.box.appendChild(br)
          } else {
            let newNode = document.createElement('span')
            newNode.setAttribute('data-key', el)
            newNode.innerHTML = el
            app.box.appendChild(newNode)
          }
        })

        app.buttons = app.box.getElementsByTagName('span')
        document.addEventListener('keydown', app.handleKey, false)
      },
      handleKey: (e) => {
        if (e.key === 'CapsLock') {
           app.box.className = app.box.className === 'capital' ? '' : 'capital'
           return false
        }
        for (let i = 0; i < app.buttons.length; i ++) {
          let el = app.buttons[i]
          el.className = el.dataset.key === e.key ? 'active' : ''
        }
      }
    }
    app.init()
  </script>
</body>
</html>