Press "Q" and "W" together (can be in any language).
+"Q"와 "W"를 동시에 눌러 보세요(언어 설정과 관계없이 동작합니다).
- + ``` -Please note that special keys, such as `key:Backspace`, `key:Left`, `key:Right`, `key:Ctrl+V`, do not work in the input. That's a side-effect of the strict filter `checkPhoneKey`. +그런데 이 예시는 `key:Backspace`·`key:Left`·`key:Right`·`key:Ctrl+V` 같은 특수 키도 동작하지 않는다는 점에 주목하세요. 필터 `checkPhoneKey`가 지나치게 엄격해서 생긴 부작용입니다. -Let's relax it a little bit: +필터를 조금 느슨하게 만들어 봅시다. ```html autorun height=60 run @@ -157,33 +157,33 @@ function checkPhoneKey(key) { key == 'ArrowLeft' || key == 'ArrowRight' || key == 'Delete' || key == 'Backspace'; } - + ``` -Now arrows and deletion works well. +이제 화살표 키와 삭제 키가 잘 동작합니다. -...But we still can enter anything by using a mouse and right-click + Paste. So the filter is not 100% reliable. We can just let it be like that, because most of time it works. Or an alternative approach would be to track the `input` event -- it triggers after any modification. There we can check the new value and highlight/modify it when it's invalid. +그런데 여전히 마우스 우클릭과 '붙여넣기'를 사용하면 아무 값이나 입력할 수 있습니다. 필터가 100% 신뢰할 만한 수단은 아닌 셈이죠. 이 코드는 대부분의 경우엔 잘 동작하니 이대로 둬도 괜찮습니다. 하지만 좀 더 보완하고 싶다면 어떤 수정이든 일어난 뒤에 트리거되는 `input` 이벤트를 추적하는 방식을 쓰면 됩니다. `input` 이벤트 핸들러에선 새 값을 검사해 유효하지 않은 값일 때 강조 표시하거나 고칠 수 있습니다. -## Legacy +## 레거시 -In the past, there was a `keypress` event, and also `keyCode`, `charCode`, `which` properties of the event object. +과거엔 `keypress`라는 이벤트가 있었고 이벤트 객체엔 `keyCode`·`charCode`·`which` 프로퍼티도 있었습니다. -There were so many browser incompatibilities while working with them, that developers of the specification had no way, other than deprecating all of them and creating new, modern events (described above in this chapter). The old code still works, as browsers keep supporting them, but there's totally no need to use those any more. +이 이벤트와 프로퍼티는 브라우저 간 비호환 문제가 아주 많았습니다. 그래서 레거시 이벤트와 프로퍼티를 전부 폐기(deprecate)하고 새로운 모던 이벤트(위에서 설명한 이벤트)에 대한 명세를 만드는 것 외엔 다른 도리가 없었습니다. 레거시 이벤트도 브라우저가 계속 지원하고 있어 옛 코드도 여전히 동작하지만 지금은 옛 이벤트와 프로퍼티를 사용할 필요가 전혀 없습니다. -## Summary +## 요약 -Pressing a key always generates a keyboard event, be it symbol keys or special keys like `key:Shift` or `key:Ctrl` and so on. The only exception is `key:Fn` key that sometimes presents on a laptop keyboard. There's no keyboard event for it, because it's often implemented on lower level than OS. +글자 키를 비롯해 `key:Shift`·`key:Ctrl` 같은 특수 키를 누르면 항상 키보드 이벤트가 발생합니다. 유일한 예외는 노트북용 키보드에 종종 있는 `key:Fn` 키입니다. `key:Fn`은 OS보다 낮은 레벨에서 구현될 때가 많아 키보드 이벤트가 발생하지 않습니다. -Keyboard events: +키보드 이벤트는 두 가지가 있습니다. -- `keydown` -- on pressing the key (auto-repeats if the key is pressed for long), -- `keyup` -- on releasing the key. +- `keydown` -- 키를 누를 때 발생(키를 오래 누르고 있으면 자동 반복) +- `keyup` -- 키에서 손을 뗄 때 발생 -Main keyboard event properties: +키보드 이벤트의 주요 프로퍼티는 다음과 같습니다. -- `code` -- the "key code" (`"KeyA"`, `"ArrowLeft"` and so on), specific to the physical location of the key on keyboard. -- `key` -- the character (`"A"`, `"a"` and so on), for non-character keys, such as `key:Esc`, usually has the same value as `code`. +- `code` -- 키보드에서 키가 자리한 물리적 위치에 따라 정해지는 '키 코드'(`"KeyA"`, `"ArrowLeft"` 등) +- `key` -- 입력된 글자(`"A"`, `"a"` 등). `key:Esc`처럼 글자가 없는 키에선 대개 `code`와 값이 같음 -In the past, keyboard events were sometimes used to track user input in form fields. That's not reliable, because the input can come from various sources. We have `input` and `change` events to handle any input (covered later in the chapter