자바스크립트 프로그램, 키보드 소스 (char code)

자바스크립트 프로그램, 키보드 소스 (char code)


자바스크립트 키보드 소스



원 소스 제작자 분께서 덴마크 분이셔서 그런가, 키보드는 덴마크 기준으로 제작되었습니다.


기본적으론, 자바스크립트(JavaScript) 함수의 ID를 주요 요소로 사용해서 구현이 되었고, Firefox, Opera, Chrome, IE9에서 테스트가 되었다고 합니다.

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>JavaScript Keyboard</title>
<script type="text/javascript"> // 자바스크립트 선언
  <!--
  var shiftState = 'lowercase';
  var altGrState = 'off';
  var capsLockState = 'off';
 
  function keyClick(key)
  {
    shiftToggle('normalKeyClick');
    altGrToggle('normalKeyClick');
    if(key == '&')
    {
      key = '&';
    }
    if(key == '<')
    {
      key = '<';
    }
    if(key == '>')
    {
      key = '>';
    }    
    if(key == 'backsp.')
    {
      var formFieldValue = document.getElementById('echoField').value;
      document.getElementById('echoField').value = formFieldValue.substring(0, formFieldValue.length - 1); // Backspacing over newlines only works in Gecko based browsers
    }
    else
    {
      document.getElementById('echoField').value = document.getElementById('echoField').value + key;
    }
    document.getElementById('echoField').focus();
  }
    
  function shiftToggle(toggleType)
  {
    if((shiftState == 'lowercase'&& (toggleType != 'normalKeyClick'))
    {
      document.getElementById('a').innerHTML = 'A';
      document.getElementById('b').innerHTML = 'B';
      document.getElementById('c').innerHTML = 'C';
      document.getElementById('d').innerHTML = 'D';
      document.getElementById('e').innerHTML = 'E';
      document.getElementById('f').innerHTML = 'F';
      document.getElementById('g').innerHTML = 'G';
      document.getElementById('h').innerHTML = 'H';
      document.getElementById('i').innerHTML = 'I';
      document.getElementById('j').innerHTML = 'J';
      document.getElementById('k').innerHTML = 'K';
      document.getElementById('l').innerHTML = 'L';
      document.getElementById('m').innerHTML = 'M';
      document.getElementById('n').innerHTML = 'N';
      document.getElementById('o').innerHTML = 'O';
      document.getElementById('p').innerHTML = 'P';
      document.getElementById('q').innerHTML = 'Q';
      document.getElementById('r').innerHTML = 'R';
      document.getElementById('s').innerHTML = 'S';
      document.getElementById('t').innerHTML = 'T';
      document.getElementById('u').innerHTML = 'U';
      document.getElementById('v').innerHTML = 'V';
      document.getElementById('w').innerHTML = 'W';
      document.getElementById('x').innerHTML = 'X';
      document.getElementById('y').innerHTML = 'Y';
      document.getElementById('z').innerHTML = 'Z';
      document.getElementById('ae').innerHTML = 'Æ';
      document.getElementById('oe').innerHTML = 'Ø';
      document.getElementById('aa').innerHTML = 'Å';
      document.getElementById('oneHalf').innerHTML = '§';
      document.getElementById('n1').innerHTML = '!';
      document.getElementById('n2').innerHTML = '\"';
      document.getElementById('n3').innerHTML = '#';
      document.getElementById('n4').innerHTML = '¤';
      document.getElementById('n5').innerHTML = '%';
      document.getElementById('n6').innerHTML = '&';
      document.getElementById('n7').innerHTML = '\/';
      document.getElementById('n8').innerHTML = '(';
      document.getElementById('n9').innerHTML = ')';
      document.getElementById('n0').innerHTML = '=';
      document.getElementById('plus').innerHTML = '?';
      document.getElementById('forwardSingleQuote').innerHTML = '`';
      document.getElementById('lessThan').innerHTML = '>';
      document.getElementById('comma').innerHTML = '\;';
      document.getElementById('dot').innerHTML = ':';
      document.getElementById('dash').innerHTML = '_';
      document.getElementById('singleQuote').innerHTML = '*';
      document.getElementById('umlaut').innerHTML = '^';
      shiftState = 'uppercase';
    }
    else if (shiftState == 'uppercase')
    {
      if(capsLockState == 'off')
      {
        document.getElementById('a').innerHTML = 'a';
        document.getElementById('b').innerHTML = 'b';
        document.getElementById('c').innerHTML = 'c';
        document.getElementById('d').innerHTML = 'd';
        document.getElementById('e').innerHTML = 'e';
        document.getElementById('f').innerHTML = 'f';
        document.getElementById('g').innerHTML = 'g';
        document.getElementById('h').innerHTML = 'h';
        document.getElementById('i').innerHTML = 'i';
        document.getElementById('j').innerHTML = 'j';
        document.getElementById('k').innerHTML = 'k';
        document.getElementById('l').innerHTML = 'l';
        document.getElementById('m').innerHTML = 'm';
        document.getElementById('n').innerHTML = 'n';
        document.getElementById('o').innerHTML = 'o';
        document.getElementById('p').innerHTML = 'p';
        document.getElementById('q').innerHTML = 'q';
        document.getElementById('r').innerHTML = 'r';
        document.getElementById('s').innerHTML = 's';
        document.getElementById('t').innerHTML = 't';
        document.getElementById('u').innerHTML = 'u';
        document.getElementById('v').innerHTML = 'v';
        document.getElementById('w').innerHTML = 'w';
        document.getElementById('x').innerHTML = 'x';
        document.getElementById('y').innerHTML = 'y';
        document.getElementById('z').innerHTML = 'z';
        document.getElementById('ae').innerHTML = 'æ';
        document.getElementById('oe').innerHTML = 'ø';
        document.getElementById('aa').innerHTML = 'å';
        document.getElementById('oneHalf').innerHTML = '½';
        document.getElementById('n1').innerHTML = '1';
        document.getElementById('n2').innerHTML = '2';
        document.getElementById('n3').innerHTML = '3';
        document.getElementById('n4').innerHTML = '4';
        document.getElementById('n5').innerHTML = '5';
        document.getElementById('n6').innerHTML = '6';
        document.getElementById('n7').innerHTML = '7';
        document.getElementById('n8').innerHTML = '8';
        document.getElementById('n9').innerHTML = '9';
        document.getElementById('n0').innerHTML = '0';
        document.getElementById('plus').innerHTML = '+';
        document.getElementById('forwardSingleQuote').innerHTML = '´';
        document.getElementById('lessThan').innerHTML = '<';
        document.getElementById('comma').innerHTML = ',';
        document.getElementById('dot').innerHTML = '.';
        document.getElementById('dash').innerHTML = '-';
        document.getElementById('singleQuote').innerHTML = '\'';
        document.getElementById('umlaut').innerHTML = '¨';
        shiftState = 'lowercase';
      }
    }
  }
 
  function altGrToggle(toggleType)
  {
    if((altGrState == 'off'&& (toggleType != 'normalKeyClick'))
    {
      document.getElementById('n2').innerHTML = '@';
      document.getElementById('n3').innerHTML = '£';
      document.getElementById('e').innerHTML = '€';
      document.getElementById('n4').innerHTML = '$';
      document.getElementById('n7').innerHTML = '{';
      document.getElementById('n8').innerHTML = '[';
      document.getElementById('n9').innerHTML = ']';
      document.getElementById('n0').innerHTML = '}';
      document.getElementById('forwardSingleQuote').innerHTML = '|';
      document.getElementById('umlaut').innerHTML = '~';
      document.getElementById('lessThan').innerHTML = '\\';
      altGrState = 'on';
    }
    else if (altGrState == 'on')
    {
      document.getElementById('n2').innerHTML = '2';
      document.getElementById('n3').innerHTML = '3';
      document.getElementById('e').innerHTML = 'e';
      document.getElementById('n4').innerHTML = '4';
      document.getElementById('n7').innerHTML = '7';
      document.getElementById('n8').innerHTML = '8';
      document.getElementById('n9').innerHTML = '9';
      document.getElementById('n0').innerHTML = '0';
      document.getElementById('forwardSingleQuote').innerHTML = '´';
      document.getElementById('umlaut').innerHTML = '¨';
      document.getElementById('lessThan').innerHTML = '<';
      altGrState = 'off';
    }
  }
 
  function toggleCapsLock()
  {
    if(capsLockState == 'off')
    {
      capsLockState = 'on';
      shiftToggle('capsLock')
    }
    else
    {
      capsLockState = 'off';
      shiftToggle('capsLock');
    }
  }
  -->
</script>
<style type="text/css">
  span.key  { font-family: monospace;
              font-size: 14px;
              cursor: pointer;
              border-collapse: collapse;
              border: 1px solid #000000;
              padding-left: 5px;
              padding-right: 5px;
              padding-top: 2px;
              padding-bottom: 2px;
              background-color: #FFFFFF;
              }
  #keyboard { font-family: monospace;
              line-height: 230%;
              border-collapse: collapse;
              border: 2px solid #000000;
              padding: 4px;
              width: 460px;
              background-color: #CFCFCF;
              }
  #shift2   { padding-right: 40px;
              }
  #Space    { padding-right: 85px;
              padding-left: 85px;
              }
</style>
</head>
<body>
<textarea id="echoField" rows="7" cols="60" style="width: 460px; height: 100px; font-family: Verdana, Arial, Helvetica, Geneva, Sans-Serif; font-size: 12px;" ></textarea>
<br /><br />
  <div id="keyboard">
    <span class="key" id="oneHalf" onclick="keyClick(this.innerHTML)"     onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">½</span>
    <span class="key" id="n1" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">1</span>
    <span class="key" id="n2" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">2</span>
    <span class="key" id="n3" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">3</span>
    <span class="key" id="n4" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">4</span>
    <span class="key" id="n5" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">5</span>
    <span class="key" id="n6" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">6</span>
    <span class="key" id="n7" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">7</span>
    <span class="key" id="n8" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">8</span>
    <span class="key" id="n9" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">9</span>
    <span class="key" id="n0" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">0</span>
    <span class="key" id="plus" onclick="keyClick(this.innerHTML)"        onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">+</span>
    <span class="key" id="forwardSingleQuote" onclick="keyClick(this.innerHTML)" onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">´</span>
    <span class="key" id="backsp" onclick="keyClick(this.innerHTML)"      onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">backsp.</span><br />
 
    <span class="key" id="tab" onclick="keyClick('\t')"                   onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">tab</span>
    <span class="key" id="q" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">q</span>
    <span class="key" id="w" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">w</span>
    <span class="key" id="e" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">e</span>
    <span class="key" id="r" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">r</span>
    <span class="key" id="t" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">t</span>
    <span class="key" id="y" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">y</span>
    <span class="key" id="u" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">u</span>
    <span class="key" id="i" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">i</span>
    <span class="key" id="o" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">o</span>
    <span class="key" id="p" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">p</span>
    <span class="key" id="aa" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">å</span>
    <span class="key" id="umlaut" onclick="keyClick(this.innerHTML)"      onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">¨</span>
    <span class="key" id="Enter1" onclick="keyClick('\n')"                onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">Enter</span><br />
 
    <span class="key" id="capsLock" onclick="toggleCapsLock()"            onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">C.L.</span>
    <span class="key" id="a" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">a</span>
    <span class="key" id="s" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">s</span>
    <span class="key" id="d" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">d</span>
    <span class="key" id="f" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">f</span>
    <span class="key" id="g" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">g</span>
    <span class="key" id="h" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">h</span>
    <span class="key" id="j" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">j</span>
    <span class="key" id="k" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">k</span>
    <span class="key" id="l" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">l</span>
    <span class="key" id="ae" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">æ</span>
    <span class="key" id="oe" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">ø</span>
    <span class="key" id="singleQuote" onclick="keyClick(this.innerHTML)" onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">'</span>
    <span class="key" id="Enter2" onclick="keyClick('\n')"                onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">Ent.</span><br />
    <span class="key" id="shift1" onclick="shiftToggle()"                 onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">sh</span>
    <span class="key" id="lessThan" onclick="keyClick(this.innerHTML)"    onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'"><</span>
    <span class="key" id="z" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">z</span>
    <span class="key" id="x" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">x</span>
    <span class="key" id="c" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">c</span>
    <span class="key" id="v" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">v</span>
    <span class="key" id="b" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">b</span>
    <span class="key" id="n" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">n</span>
    <span class="key" id="m" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">m</span>
    <span class="key" id="comma" onclick="keyClick(this.innerHTML)"       onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">,</span>
    <span class="key" id="dot" onclick="keyClick(this.innerHTML)"         onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">.</span>
    <span class="key" id="dash" onclick="keyClick(this.innerHTML)"        onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">-</span>
    <span class="key" id="shift2" onclick="shiftToggle()"                 onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">shift</span><br />
    <span class="key" id="Ctrl1" onclick="keyClick('')"                   onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">Ctrl</span>
    <span class="key" id="Alt" onclick="keyClick('')"                     onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">Alt</span>
    <span class="key" id="Space" onclick="keyClick(' ')"                  onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">Space</span>
    <span class="key" id="AltGr" onclick="altGrToggle()"                  onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">Alt Gr</span>
    <span class="key" id="Ctrl2" onclick="keyClick('')"                   onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">Ctrl</span>
  </div>
</body>
</html>
cs



그리고 위와 같은 키보드를 구현하기 위해선 Key Code를 알고 있어야 합니다.


이것은 참조 사이트(자바스크립트(JavaScript) Char Codes (Key Codes)[링크])에서 확인이 가능합니다. Try it! 란 박스 오른쪽 칸에 커서를 놓고 키를 입력하면 실시간으로 바로바로 KeyCode를 반환해 줍니다.


자바스크립트 Char 코드자바스크립트 Char 코드


자바스크립트 프로그램, 키보드 소스 (char code)

이 글을 공유하기

댓글(0)

Designed by JB FACTORY