JavaScript의 KeyCode에서 문자 값 가져오기...그다음 다듬기
이것이 제가 지금 가지고 있는 것입니다.
$("input").bind("keydown",function(e){
var value = this.value + String.fromCharCode(e.keyCode);
}
에 약에만.e.keyCodeASCII 문자(,Alt , , 등)를 사용할 수 없습니다...나는 이제 할 필요가 있습니다.trim의 이 .value검색 테이블이 아닌 프로그래밍 방식으로 검색할 수 있습니다.
저는 jQuery를 사용합니다.
나는 사용해야 합니다.keydown 건의사의keyPress캡처해야 하는 특정 키(, , , 등)Esc에 대해 활성화되지 않습니다.
사용할 수 없습니다.setTimeout입력 값을 가져옵니다.setTimeout(function(){},0)너무 느립니다.
경험으로는 내경로는으험는▁in.String.fromCharCode(e.keyCode)신뢰할 수 없습니다.String.fromCharCode에서는 유니코드 할 것을 예상합니다.e.keyCodeJavascript 키코드를 반환합니다.Javascript 키코드와 유니코드 문자코드는 다릅니다!특히 숫자 패드 키는 다른 값을 반환합니다.keycode키(키이므로)에서한 키를 사용할 수 있습니다.keycode 다에 대해 반환됩니다.upper그리고.lowercase문자(두 경우 모두 동일한 키를 눌렀음), 서로 다른 문자임에도 불구하고charcodes.
키은 예를들, 보은숫 1키다로 합니다.keycode숫자 패드 키 1(켜짐)이 생성되는 동안 49keycode와함사용과 함께 합니다.String.fromCharCode다음과 같은 정보를 얻을 수 있습니다.
String.fromCharCode(49) returns "1"
String.fromCharCode(97) returns "a"
String.fromCharCode자바스크립트 키코드가 아닌 유니코드 문자코드가 필요합니다.키는 다음과 같은 이벤트를 생성합니다.keycode65로, 생성할 문자의 대소문자와 무관합니다(이벤트에서 키를 누르는 경우 등에 대한 수식어도 있습니다).문자에 유니코드가 있습니다.charcode캐릭터가 61인 동안.charcode(예를 들어, http://www.utf8-chartable.de/) 에 따르면) 41.하지만, 그것들은hex하면 값, 십, 수, 진이 나옵니다.charcode"A"의 경우 65, "a"의 경우 97입니다. [1] 이것은 우리가 얻는 것과 일치합니다.String.fromCharCode이 값들에 대해.
저만의 요구 사항은 숫자와 일반 문자(문자열의 위치에 따라 수락 또는 거부)를 처리하고 제어 문자(-Fkey, -something)를 통과시키는 것으로 제한되었습니다.따라서 제어 문자를 확인할 수 있습니다. 제어 문자가 아닌 경우 범위를 확인한 다음 실제 문자를 확인해야 합니다.대소문자를 걱정하지 않고(어차피 모든 문자를 대문자로 변경) 이미 키 코드 범위를 제한했기 때문에 숫자 패드 키만 걱정하면 됩니다.이를 위해 다음 사항이 충분합니다.
String.fromCharCode((96 <= key && key <= 105)? key-48 : key)
더 일반적으로, 다일반적로신있, 를 확실하게 반환하는 기능.charcode(아마 jQuery 플러그인으로) 정말 좋겠지만, 지금은 쓸 시간이 없습니다.미안하다.
또한 언급하고 싶습니다.e.which(를 정규화하는 (jQuery 사는경우다니합)을 사용합니다e.keyCode그리고.e.charCode어떤 종류의 키를 눌렀는지 걱정할 필요가 없습니다.그것과 결합하는 것의 문제.String.fromCharCode유해.
잠시 혼란스러웠습니다. 모든 서류가 그러더군요.String.fromCharCode에서는 유니코드 " 유코가니다합"가 합니다.charcode실제로 ASCII 문자 코드에 대해 작동하는 것처럼 보였지만, 그것은 일반적인 라틴 문자에 대해 ASCII 문자 코드와 유니코드 10진수 문자 코드가 겹친다는 사실과 결합하여 16진수에서 10진수로 변환해야 하는 필요성 때문이라고 생각합니다.
질문을 제대로 이해하지 못했을 수도 있지만, 사용하지 않을 수 있습니까?keyup두 입력을 모두 캡처하려면 어떻게 해야 합니까?
$("input").bind("keyup",function(e){
var value = this.value + String.fromCharCode(e.keyCode);
});
키 코드로 인덱싱된 읽기 가능한 키 이름
을 모두 할 수 .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]
];
참고: 위의 배열에서 각 값의 위치가 중요합니다.
""알 수 없는 값을 가진 코드의 자리 표시자입니다.
이 정적 배열 조회 접근 방식을 사용하여 다음 코드 조각을 시도하십시오...
var keyCodes = [];
$("#reset").click(function() {
keyCodes = [];
$("#in").val("");
$("#key-codes").html("var keyCodes = [ ];");
$("#key-names").html("var keyNames = [ ];");
});
$(document).keydown(function(e) {
keyCodes.push(e.which);
updateOutput();
});
function updateOutput() {
var kC = "var keyCodes = [ ";
var kN = "var keyNames = [ ";
var len = keyCodes.length;
for (var i = 0; i < len; i++) {
kC += keyCodes[i];
kN += "'"+keyboardMap[keyCodes[i]]+"'";
if (i !== (len - 1)) {
kC += ", ";
kN += ", ";
}
}
kC += " ];";
kN += " ];";
$("#key-codes").html(kC);
$("#key-names").html(kN);
}
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]
];#key-codes,
#key-names {
font-family: courier, serif;
font-size: 1.2em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="in" placeholder="Type here..." />
<button id="reset">Reset</button>
<br/>
<br/>
<div id="key-codes">var keyCodes = [ ];</div>
<div id="key-names">var keyNames = [ ];</div>참고할 만한 주요 코드
문자 A-Z: (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) 또는 명령 키(Mac)
keyboardMap[91]; // OS_KEY
Alt 키: (18)
keyboardMap[18]; // ALT
제어 키: (17)
keyboardMap[17]; // CONTROL
시프트 키: (16)
keyboardMap[16]; // SHIFT
Caps Lock 키: (20)
keyboardMap[20]; // CAPS_LOCK
중요한 참고 사항: 위에서 수락한 답변은 마침표, 쉼표, 대시 등과 같은 keyCode > = 144에 대해 올바르게 작동하지 않습니다.이러한 경우 보다 일반적인 알고리즘을 사용해야 합니다.
let chrCode = keyCode - 48 * Math.floor(keyCode / 48);
let chr = String.fromCharCode((96 <= keyCode) ? chrCode: keyCode);
그런지, 함수의 한 것 .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을 사용합니다.
편집: 당!정정하겠습니다 (Crescent Fresh와 David에게 감사드립니다):JQuery(또는 기본 DOM 호스트)는 WM_KEYDOWN 및 기타 이벤트의 세부 정보를 노출하지 않습니다.오히려 그들은 이 데이터를 미리 소화하고 JQuery에서도 keyDown의 경우 다음과 같은 결과를 얻을 수 있습니다.
- event.key문자가 아닌 키에 대한 코드
- event.char문자 키 코드
이러한 속성은 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
읽기 전용 속성을 사용할 수도 있습니다.또한 등의 특수 키를 존중하며 IE9에서 지원합니다.
인쇄할 수 없거나 특수 문자를 누르면 다음과 같이 정의된 키 값이 표시됩니다.'Shift'또는'Multiply'.
event.key- X ->
'x' - Shift+X ->
'X' - F5 ->
'F5'
이것이 오래된 질문이라는 것을 알지만, 저는 오늘 이 문제에 대한 사전 패키지화된 해결책을 찾다가 우연히 발견했고, 제 요구를 충족시키는 것은 아무것도 발견하지 못했습니다.
대문자(이동), 소문자, 구두점, 숫자 키패드 등을 올바르게 지원하는 솔루션(영어만)이 있습니다.
또한 ESC, 화살표, Function 키 등과 같은 인쇄 불가능한 키를 간단하고 직접적으로 식별하고 대응할 수 있습니다.
https://jsfiddle.net/5hhu896g/1/
keyboardCharMap and keyboardNameMap are the key to making this work
Named Key Array를 제공하여 타이핑과 많은 발견을 도와주신 Dave Alger씨께 감사드립니다.
나는 최근에 번역하는 키사이트라는 모듈을 썼습니다.keypress,keydown,그리고.keyup이벤트를 각각 문자와 키로 변환합니다.
예:
element.addEventListener("keydown", function(event) {
var character = keysight(event).char
})
저처럼 키코드의 실제 유니코드 문자 값을 찾으시는 분들을 위해, 여기 그 기능이 있습니다.예를 들어, 오른쪽 화살표 유니코드 키코드를 지정하면 보이는 문자열이 출력됩니다.\u001B\u005B\u0043
function toUnicode(theString) {
var unicodeString = '';
for (var i = 0; i < theString.length; i++) {
var theUnicode = theString.charCodeAt(i).toString(16).toUpperCase();
while (theUnicode.length < 4) {
theUnicode = '0' + theUnicode;
}
theUnicode = '\\u' + theUnicode;
unicodeString += theUnicode;
}
return unicodeString;
}
키 코드에 대한 키 누름 및 문자 값에서 키 코드 가져오기 링크를 참조하십시오.
$('input#inp').keyup(function(e){
$(this).val(String.fromCharCode(e.keyCode));
$('div#output').html('Keycode : ' + e.keyCode);
});
언급URL : https://stackoverflow.com/questions/1772179/get-character-value-from-keycode-in-javascript-then-trim
'source' 카테고리의 다른 글
| 전후 캐치 위치 (0) | 2023.07.25 |
|---|---|
| 웹 서비스 API Keys 및 Ajax - 키 보호 (0) | 2023.07.25 |
| 날짜가 유효한지 확인합니다. (0) | 2023.07.25 |
| 'root' 사용자에 대한 액세스가 거부되었습니다(암호 사용: 아니요). (0) | 2023.07.25 |
| 구성 요소 Vue 3에서 속성 렌더링 방법 (0) | 2023.07.20 |