[javascript] JavaScript의 KeyCode에서 문자 값을 얻은 다음 다듬기

Program / 글쓴이

이것이 내가 지금 가진 것입니다.

$("input").bind("keydown",function(e){
    var value = this.value + String.fromCharCode(e.keyCode);
}

(가) 경우 e.keyCodeASCII 문자하지 않을 수 있습니다 ( Alt, backspace, del, arrows., 등) … 지금해야합니다 trim에서 이러한 값을 value어떻게 든 (바람직하게 프로그래밍 -하지 룩업 테이블에).

jQuery를 사용하고 있습니다.

keydown이벤트 를 사용해야합니다 . keyPress나는 (캡처에 필요한 특정 키에 대한 활성화하지 않습니다 Esc, del, backspace, 등).

setTimeout입력 값을 얻는 데 사용할 수 없습니다 . setTimeout(function(){},0)너무 느립니다.

답변

어쩌면 나는 질문을 올바르게 이해하지 못했지만 keyup두 입력을 모두 캡처 하려면 사용할 수 없습니까?

$("input").bind("keyup",function(e){
    var value = this.value + String.fromCharCode(e.keyCode);
});

답변

내 경험으로 String.fromCharCode(e.keyCode)는 신뢰할 수 없습니다. String.fromCharCode유니 코드 문자 코드를 인수로 예상합니다. e.keyCode자바 스크립트 키 코드를 반환합니다. 자바 스크립트 키 코드와 유니 코드 문자 코드는 동일 하지 않습니다 ! 특히, keycode숫자 키패드 키는 일반 숫자 키와 다르지만 (키가 다르기 때문에) 서로 다르지만 문자 와 keycode두 문자 모두에 대해 동일한 키 가 반환됩니다 (두 경우 모두 동일한 키를 누름) . upperlowercasecharcodes

예를 들어, 일반 숫자 키 1은 keycode49 로 이벤트를 생성하는 반면 숫자 키패드 키 1 ( Numlock켜짐)은 keycode97을 생성 String.fromCharCode합니다.

String.fromCharCode(49) returns "1"
String.fromCharCode(97) returns "a"

String.fromCharCode자바 스크립트 키 코드가 아닌 유니 코드 문자 코드가 필요합니다. 키 a는 생성하는 keycode문자의 경우에 관계없이 65 의 이벤트를 생성합니다 (이벤트 에서 Shift키를 누른 경우 등에 대한 수정 자도 있음 ). 문자 a는 유니 코드 charcode61이고 문자 A는 charcode41입니다 (예 : http://www.utf8-chartable.de/ ). 그러나이 hex값 은 10 진수로 변환하면 charcode“A”는 65이고 “a”는 97입니다. [1] 이것은 우리가 String.fromCharCode이러한 가치를 얻는 것과 일치 합니다.

내 자신의 요구 사항은 숫자와 일반 문자 (문자열의 위치에 따라 수락 또는 거부)를 처리하고 제어 문자 ( F-keys, Ctrl-something)를 통과 시키는 것으로 제한 되었습니다. 따라서 제어 문자가 아닌 경우 제어 문자를 확인할 수 있습니다. 제어 문자가 아닌 경우 범위를 확인한 다음 실제 문자를 가져와야합니다. 대소 문자에 대해 걱정하지 않고 (어쨌든 모든 문자를 대문자로 변경) 키 코드 범위를 이미 제한 했으므로 숫자 키패드 키만 걱정하면됩니다. 다음과 같이하면 충분합니다.

String.fromCharCode((96 <= key && key <= 105)? key-48 : key)

더 일반적으로 문자를 안정적으로 반환하는 함수 charcode는 훌륭하지만 (jQuery 플러그인과 같은 것), 지금은 쓸 시간이 없습니다. 죄송합니다.

또한 e.which정규화하는 e.keyCode및 ( jQuery를 사용하는 경우) 언급 하여 e.charCode어떤 종류의 키를 눌렀는지 걱정할 필요가 없습니다. 그것을 결합하는 문제는 String.fromCharCode남아 있습니다.

[1] 나는 잠시 혼란 스러웠다. 모든 문서 String.fromCharCode는 유니 코드 를 기대 한다고 말하지만 charcode실제로는 ASCII 문자 코드에서 작동하는 것처럼 보였지만 ASCII 문자 코드와 유니 코드 십진수 문자 코드가 평소와 겹친다는 사실과 함께 16 진수에서 10 진수로 변환해야한다고 생각했습니다. 라틴 문자.

답변

키 코드로 색인이 생성 된 읽을 수있는 키 이름

단순히 숫자를 변환 할 수 있도록 단순히 정적 배열의 모든 상응하는 값을 나열 그래서 상대적으로 적은 키 코드가 있습니다 65에 A사용이keyboardMap[65]

모든 키 코드가 인쇄 가능한 문자로 매핑되는 것은 아니므로 식별 가능한 다른 문자열이 반환됩니다.

필요에 맞게 배열을 수정해야 할 수도 있고 번역하지 않으려는 모든 문자에 대해 빈 문자열을 반환 할 수도 있습니다. 다음 배열을 사용하면 어떤 환경에서 어떤 키를 눌렀는지 빠르고 안정적으로 결정할 수 있습니다. 즐겨!

// names of known key codes (0-255)

var keyboardMap = [
  "", // [0]
  "", // [1]
  "", // [2]
  "CANCEL", // [3]
  "", // [4]
  "", // [5]
  "HELP", // [6]
  "", // [7]
  "BACK_SPACE", // [8]
  "TAB", // [9]
  "", // [10]
  "", // [11]
  "CLEAR", // [12]
  "ENTER", // [13]
  "ENTER_SPECIAL", // [14]
  "", // [15]
  "SHIFT", // [16]
  "CONTROL", // [17]
  "ALT", // [18]
  "PAUSE", // [19]
  "CAPS_LOCK", // [20]
  "KANA", // [21]
  "EISU", // [22]
  "JUNJA", // [23]
  "FINAL", // [24]
  "HANJA", // [25]
  "", // [26]
  "ESCAPE", // [27]
  "CONVERT", // [28]
  "NONCONVERT", // [29]
  "ACCEPT", // [30]
  "MODECHANGE", // [31]
  "SPACE", // [32]
  "PAGE_UP", // [33]
  "PAGE_DOWN", // [34]
  "END", // [35]
  "HOME", // [36]
  "LEFT", // [37]
  "UP", // [38]
  "RIGHT", // [39]
  "DOWN", // [40]
  "SELECT", // [41]
  "PRINT", // [42]
  "EXECUTE", // [43]
  "PRINTSCREEN", // [44]
  "INSERT", // [45]
  "DELETE", // [46]
  "", // [47]
  "0", // [48]
  "1", // [49]
  "2", // [50]
  "3", // [51]
  "4", // [52]
  "5", // [53]
  "6", // [54]
  "7", // [55]
  "8", // [56]
  "9", // [57]
  "COLON", // [58]
  "SEMICOLON", // [59]
  "LESS_THAN", // [60]
  "EQUALS", // [61]
  "GREATER_THAN", // [62]
  "QUESTION_MARK", // [63]
  "AT", // [64]
  "A", // [65]
  "B", // [66]
  "C", // [67]
  "D", // [68]
  "E", // [69]
  "F", // [70]
  "G", // [71]
  "H", // [72]
  "I", // [73]
  "J", // [74]
  "K", // [75]
  "L", // [76]
  "M", // [77]
  "N", // [78]
  "O", // [79]
  "P", // [80]
  "Q", // [81]
  "R", // [82]
  "S", // [83]
  "T", // [84]
  "U", // [85]
  "V", // [86]
  "W", // [87]
  "X", // [88]
  "Y", // [89]
  "Z", // [90]
  "OS_KEY", // [91] Windows Key (Windows) or Command Key (Mac)
  "", // [92]
  "CONTEXT_MENU", // [93]
  "", // [94]
  "SLEEP", // [95]
  "NUMPAD0", // [96]
  "NUMPAD1", // [97]
  "NUMPAD2", // [98]
  "NUMPAD3", // [99]
  "NUMPAD4", // [100]
  "NUMPAD5", // [101]
  "NUMPAD6", // [102]
  "NUMPAD7", // [103]
  "NUMPAD8", // [104]
  "NUMPAD9", // [105]
  "MULTIPLY", // [106]
  "ADD", // [107]
  "SEPARATOR", // [108]
  "SUBTRACT", // [109]
  "DECIMAL", // [110]
  "DIVIDE", // [111]
  "F1", // [112]
  "F2", // [113]
  "F3", // [114]
  "F4", // [115]
  "F5", // [116]
  "F6", // [117]
  "F7", // [118]
  "F8", // [119]
  "F9", // [120]
  "F10", // [121]
  "F11", // [122]
  "F12", // [123]
  "F13", // [124]
  "F14", // [125]
  "F15", // [126]
  "F16", // [127]
  "F17", // [128]
  "F18", // [129]
  "F19", // [130]
  "F20", // [131]
  "F21", // [132]
  "F22", // [133]
  "F23", // [134]
  "F24", // [135]
  "", // [136]
  "", // [137]
  "", // [138]
  "", // [139]
  "", // [140]
  "", // [141]
  "", // [142]
  "", // [143]
  "NUM_LOCK", // [144]
  "SCROLL_LOCK", // [145]
  "WIN_OEM_FJ_JISHO", // [146]
  "WIN_OEM_FJ_MASSHOU", // [147]
  "WIN_OEM_FJ_TOUROKU", // [148]
  "WIN_OEM_FJ_LOYA", // [149]
  "WIN_OEM_FJ_ROYA", // [150]
  "", // [151]
  "", // [152]
  "", // [153]
  "", // [154]
  "", // [155]
  "", // [156]
  "", // [157]
  "", // [158]
  "", // [159]
  "CIRCUMFLEX", // [160]
  "EXCLAMATION", // [161]
  "DOUBLE_QUOTE", // [162]
  "HASH", // [163]
  "DOLLAR", // [164]
  "PERCENT", // [165]
  "AMPERSAND", // [166]
  "UNDERSCORE", // [167]
  "OPEN_PAREN", // [168]
  "CLOSE_PAREN", // [169]
  "ASTERISK", // [170]
  "PLUS", // [171]
  "PIPE", // [172]
  "HYPHEN_MINUS", // [173]
  "OPEN_CURLY_BRACKET", // [174]
  "CLOSE_CURLY_BRACKET", // [175]
  "TILDE", // [176]
  "", // [177]
  "", // [178]
  "", // [179]
  "", // [180]
  "VOLUME_MUTE", // [181]
  "VOLUME_DOWN", // [182]
  "VOLUME_UP", // [183]
  "", // [184]
  "", // [185]
  "SEMICOLON", // [186]
  "EQUALS", // [187]
  "COMMA", // [188]
  "MINUS", // [189]
  "PERIOD", // [190]
  "SLASH", // [191]
  "BACK_QUOTE", // [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]
  "OPEN_BRACKET", // [219]
  "BACK_SLASH", // [220]
  "CLOSE_BRACKET", // [221]
  "QUOTE", // [222]
  "", // [223]
  "META", // [224]
  "ALTGR", // [225]
  "", // [226]
  "WIN_ICO_HELP", // [227]
  "WIN_ICO_00", // [228]
  "", // [229]
  "WIN_ICO_CLEAR", // [230]
  "", // [231]
  "", // [232]
  "WIN_OEM_RESET", // [233]
  "WIN_OEM_JUMP", // [234]
  "WIN_OEM_PA1", // [235]
  "WIN_OEM_PA2", // [236]
  "WIN_OEM_PA3", // [237]
  "WIN_OEM_WSCTRL", // [238]
  "WIN_OEM_CUSEL", // [239]
  "WIN_OEM_ATTN", // [240]
  "WIN_OEM_FINISH", // [241]
  "WIN_OEM_COPY", // [242]
  "WIN_OEM_AUTO", // [243]
  "WIN_OEM_ENLW", // [244]
  "WIN_OEM_BACKTAB", // [245]
  "ATTN", // [246]
  "CRSEL", // [247]
  "EXSEL", // [248]
  "EREOF", // [249]
  "PLAY", // [250]
  "ZOOM", // [251]
  "", // [252]
  "PA1", // [253]
  "WIN_OEM_CLEAR", // [254]
  "" // [255]
];

참고 : 위 배열에서 각 값의 위치가 중요합니다. 은 ""알 수없는 값을 코드에 대한 자리 표시 자입니다.

이 정적 배열 조회 접근 방식을 사용하여 다음 코드 스 니펫을 사용해보십시오 …

코드 스 니펫 표시

주목할 가치가있는 키 코드

편지 AZ : (65-90)

keyboardMap[65];  // A
...
keyboardMap[90];  // Z

숫자 0-9 : (48-57)

keyboardMap[48];  // 0
...
keyboardMap[57];  // 9

숫자 패드 0-9 : (96-105)

keyboardMap[96];   // NUMPAD0
...
keyboardMap[105];  // NUMPAD9

화살표 키 : (37-40)

keyboardMap[37];  // LEFT
keyboardMap[38];  // UP
keyboardMap[39];  // RIGHT
keyboardMap[40];  // DOWN

탭 키 : (9)

keyboardMap[9];  // TAB

키 입력 : (13)

keyboardMap[13];  // ENTER

스페이스 바 키 : (32)

keyboardMap[32];  // SPACE

OS 특정 키 (91) Windows 키 (Windows) 또는 Command 키 (Mac)

keyboardMap[91];  // OS_KEY

Alt 키 : (18)

keyboardMap[18];  // ALT

컨트롤 키 : (17)

keyboardMap[17];  // CONTROL

Shift 키 : (16)

keyboardMap[16];  // SHIFT

캡 잠금 키 : (20)

keyboardMap[20];  // CAPS_LOCK

답변

중요한 참고 사항 : 위의 대답은 keyCode> = 144, 즉 마침표, 쉼표, 대시 등에서 올바르게 작동하지 않습니다. 일반적인 알고리즘을 사용해야하는 경우 :

let chrCode = keyCode - 48 * Math.floor(keyCode / 48);
let chr = String.fromCharCode((96 <= keyCode) ? chrCode: keyCode);

이유가 궁금하다면 내장 JS 함수의 동작 때문에 이것이 필요합니다 String.fromCharCode(). 값을 보려면 keyCode <= 96함수를 사용하여 매핑하는 것 같습니다.

chrCode = keyCode - 48 * Math.floor(keyCode / 48)

값을 보려면 keyCode > 96함수를 사용하여 매핑하는 것 같습니다.

chrCode = keyCode

이것이 이상한 행동처럼 보인다면 .. 동의합니다. 슬프게도 JS 코어에서 본 가장 이상한 것과는 거리가 멀다.

document.onkeydown = function(e) {
    let keyCode = e.keyCode;
    let chrCode = keyCode - 48 * Math.floor(keyCode / 48);
    let chr = String.fromCharCode((96 <= keyCode) ? chrCode: keyCode);
    console.log(chr);
};
<input type="text" placeholder="Focus and Type"/>

스 니펫 확장

답변

이것이 게임 또는 빠른 응답 유형의 응용 프로그램이므로 KEYPRESS보다 KEYDOWN을 사용한다고 가정합니다.

편집 : Dang! 않는 JQuery와 (또는 오히려 기본 DOM 호스트) : 내가 수정 스탠드 (당신에게 초승달 신선한 다윗에게 감사) 하지 WM_KEYDOWN의 등 행사의 세부 사항을 노출합니다. 오히려 그들은이 데이터를 사전 소화하고 JQuery에서도 keyDown의 경우 다음을 얻습니다.

이러한 속성은 UniCode 값입니다.
참고로 JQuery 문서에서 권위있는 참조를 찾을 수는 없었지만 그물에 대한 많은 평판이 좋은 예제는이 두 속성을 나타냅니다.

따라서 내 자바 (Javascript가 아닌)에서 채택한 다음 코드는 완전히 잘못되었습니다 …

다음은 키 코드의 “흥미로운”부분을 제공합니다.

  value = e.KeyCode;
  repeatCount = value & 0xFF;
  scanCode = (value >> 16) & 0xFF;  // note we take the "extended bit" deal w/ it later.
  wasDown = ((value & 0x4000) != 0);  // indicate key was readily down (auto-repeat)
  if (scanCode > 127)
      // deal with extended
  else
      // "regular" character

답변

나는 이것이 오래된 질문이라는 것을 알고 있지만 오늘이 문제에 대한 사전 패키지 솔루션을 찾고 그것을 발견했으며 실제로 내 요구를 충족시키는 것을 찾지 못했습니다.

대문자 (shift), 소문자, 문장 부호, 숫자 키패드 등을 올바르게 지원하는 솔루션 (영어로만 제공)은 다음과 같습니다.

또한 ESC, 화살표, 기능 키 등과 같이 인쇄 할 수없는 키를 간단하고 간단하게 식별하고 반응 할 수 있습니다.

https://jsfiddle.net/5hhu896g/1/

keyboardCharMap and keyboardNameMap are the key to making this work

타이핑과 많은 발견을 구해준 DaveAlger에게 감사드립니다! -명명 된 키 배열을 제공합니다.

답변

최근 에 , 및 이벤트를 각각 문자와 키로 변환하는 keysight 라는 모듈을 작성했습니다 .keypresskeydownkeyup

예: 

 element.addEventListener("keydown", function(event) {
    var character = keysight(event).char
 })