Получить значение символа из кода ключа в JavaScript... затем обрезать
вот что у меня есть сейчас:
$("input").bind("keydown",function(e){
var value = this.value + String.fromCharCode(e.keyCode);
}
если e.keyCode не может быть символом ASCII ( Alt,backspace,del,стрелки и т. д.)...
Мне бы сейчас нужно trim эти значения value как - то (предпочтительно программно-не с таблицами поиска).
я использую jQuery.
Я должен использовать keydown событие. keyPress не активируется для определенных ключей, которые мне нужно захватить (Esc,del,backspace и т. д.).
Я не могу использовать setTimeout чтобы получить входное значение. setTimeout(function(){},0) слишком медленно.
9 ответов:
может быть, я не понял вопрос правильно, но вы не можете использовать
keyupЕсли вы хотите захватить оба входа?$("input").bind("keyup",function(e){ var value = this.value + String.fromCharCode(e.keyCode); });
по моему опыту
String.fromCharCode(e.keyCode)ненадежно.String.fromCharCodeожидает кодировку юникода в качестве аргумента;e.keyCodeвозвращает коды ключей javascript. Javascript keycodes и Unicode charcodes are не то же самое! В частности, клавиши numberpad возвращают другойkeycodeот обычных цифровых клавиш (так как они разные ключи) в то время как то же самоеkeycodeвозвращается какupperиlowercaseбуквы (вы нажали одну и ту же клавишу в обоих случаях), несмотря на то, что они имеют разныеcharcodes.например, обычный цифровой ключ 1 генерирует событие с
keycode49 в то время как клавиша numberpad 1 (с Numlock on) генерируетkeycode97. Используется сString.fromCharCodeмы получаем следующее:String.fromCharCode(49) returns "1" String.fromCharCode(97) returns "a"
String.fromCharCodeожидает кодировки Юникода, а не кодировки javascript. Ключ a генерирует событие сkeycode65, независимо от случая символа, который он будет генерировать (есть также модификатор для if Shift клавиша нажата, и т. д. в случае.) Характер a имеет unicodecharcodeиз 61 в то время как символ A естьcharcodeиз 41 (согласно, например,http://www.utf8-chartable.de/). однако этоhexзначения, преобразование в десятичное дает намcharcodeиз 65 для "А "и 97 для"а".[1] это согласуется с тем, что мы получаем отString.fromCharCodeдля этих значений.мои собственные требования были ограничены к обработке чисел и обычных букв (принятие или отклонение в зависимости от позиции в строке) и разрешению управляющих символов (Fключи, Ctrl - что-то) до конца. Таким образом, я могу проверить контрольные символы, если это не контрольный символ, который я проверяю по диапазону, и только тогда мне нужно получить фактический символ. Учитывая, что я не беспокоюсь о case (я все равно меняю все буквы на верхний регистр) и уже ограничил диапазон кодов клавиш, я только придется беспокоиться о цифровой блок клавиш. Для этого достаточно следующего:
String.fromCharCode((96 <= key && key <= 105)? key-48 : key)в более общем смысле, функция для надежного возврата символа из
charcodeбыло бы здорово (возможно, как плагин jQuery), но у меня нет времени, чтобы написать его прямо сейчас. Извиняюсь.я бы также упомянуть
e.which(если вы используете jQuery) который нормализуетe.keyCodeиe.charCode, так что вам не нужно беспокоиться о том, какой ключ был нажат. Проблема с объединением его сString.fromCharCodeостается.[1] я был сбит с толку на некоторое время. все документы говорят, что
String.fromCharCodeожидает unicodecharcode, хотя на практике это, казалось, работало для ASCII-кодов, но это было связано с необходимостью преобразования в десятичный из шестнадцатеричного, в сочетании с тем, что ASCII-коды и десятичные коды unicode перекрываются для обычных латинских букв.
читаемые имена ключей индексируются по коду ключа
существует относительно мало ключевых кодов, поэтому я просто перечислил все соответствующие значения в статическом массиве, чтобы я мог просто преобразовать число
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] ];Примечание:положение каждого значения в массиве выше важно. The
""являются заполнителями для кодов с неизвестными значениями.попробуйте следующий фрагмент кода, используя этот статический массив поиска подход...
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Клавиша Tab: (9)
keyboardMap[9]; // TABEnter Ключ: (13)
keyboardMap[13]; // ENTERКлавиша Пробел: (32)
keyboardMap[32]; // SPACEспецифический ключ ОС (91) Windows Key (Windows) или Command Key (Mac)
keyboardMap[91]; // OS_KEYКлавишу Alt: (18)
keyboardMap[18]; // ALTКлюч-Контроль: (17)
keyboardMap[17]; // CONTROLКлавиша "Shift": (16)
keyboardMap[16]; // SHIFTCaps Lock Key: (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"/>
Я предполагаю, что это для игры или для быстро реагирующего типа приложения, следовательно, использование KEYDOWN, чем нажатие клавиши.
Edit: Черт! Я исправляюсь (спасибо Crescent Fresh и David): JQuery (или даже скорее базовые хосты DOM) do не раскрыть детали WM_KEYDOWN и других событий. Скорее они предварительно переваривают эти данные и, в случае keyDown даже в JQuery, мы получить:
- событие.код для несимвольных клавиш
- событие.charCode для ключей символ
обратите внимание, что эти свойства являются значения Юникода.
Обратите внимание, что я не смог найти авторитетную ссылку на это в документах JQuery, но многие авторитетные примеры в сети ссылаются на эти два свойства.поэтому следующий код, адаптированный из некоторых java (не 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
в ответ на эту проблему я просто написал плагин jQuery:https://github.com/bpeacock/key-to-charCode/
Это немного вниз и грязно и может быть лучше интегрирован в jQuery, но это начало.
Я знаю, что это старый вопрос, но я столкнулся с ним сегодня, ища предварительно упакованное решение этой проблемы, и не нашел ничего, что действительно отвечало бы моим потребностям.
вот решение (только на английском языке), которое правильно поддерживает верхний регистр (сдвинутый), нижний регистр, пунктуацию, цифровую клавиатуру и т. д.
Он также позволяет легко и прямолинейно идентифицировать - и реагировать на-непечатаемые клавиши, такие как ESC, стрелки, функциональные клавиши, так далее.
https://jsfiddle.net/5hhu896g/1/
keyboardCharMap and keyboardNameMap are the key to making this workспасибо DaveAlger за спасение меня несколько нажатий на клавиши - и много открытий! - путем предоставления массива именованных ключей.
недавно я написал модуль под названием keysight что означает
keypress,keydownиkeyupсобытий в символы и ключи соответственно.пример:
element.addEventListener("keydown", function(event) { var character = keysight(event).char })
см. эту ссылку получить код ключа от нажатия клавиши и значение char для любого кода ключа
$('input#inp').keyup(function(e){ $(this).val(String.fromCharCode(e.keyCode)); $('div#output').html('Keycode : ' + e.keyCode); });
Comments