Получить значение символа из KeyCode в JavaScript… затем обрезать

152

Вот что у меня сейчас:

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

Если e.keyCodeне может быть ASCII символов ( Alt, backspace, del, arrows., И т.д.) ... Я бы сейчас нужен trimэти значения от valueкаких - то образом (предпочтительно программно - не с таблицами поиска).

Я использую JQuery.

Я должен использовать keydownсобытие. keyPressне включается для определенного клавиша мне нужен захват ( Esc, del, backspaceи т.д.).

Я не могу использовать, setTimeoutчтобы получить значение ввода. setTimeout(function(){},0)слишком медленно

javascript  jquery  special-characters  keycode 
— Дэвид Мердок
источник
11
Вы должны использовать keydownдля захвата кодов символов? Вас ждет адская поездка: quirksmode.org/js/keys.html (подсказка: используйте keypress!! )
— Crescent Fresh
1
Случай персонажа не имеет значения. И мне нужно захватить вверх, вниз, влево, вправо, esc, del, backspace как минимум для FF и IE; так что о нажатии клавиш не может быть и речи. Спасибо за подсказку, хотя. :-)
— Дэвид Мердок
В ответ на эту проблему я только что написал плагин jQuery: github.com/bpeacock/key-to-charCode Он немного грязный и может быть лучше интегрирован в jQuery, но это только начало.
— Брайан Пикок
1
Для тех, кто пришел сюда, пытаясь решить проблему с KeyCode, но на самом деле просто хочет посмотреть, какая клавиша была нажата, посмотрите этот ответ . TLDR:document.onkeydown = function(e){ console.log('Key: ' + e.key); }
— user1717828

Ответы:

164

Может быть, я не правильно понял вопрос, но вы не можете использовать, keyupесли вы хотите захватить оба входа?

$("input").bind("keyup",function(e){
    var value = this.value + String.fromCharCode(e.keyCode);
});
— Дэвид Хеллсинг
источник
10
Это не работает с другими локалями, находящимися за пределами диапазона ASCII (например, латинский-1, например, немецкий, французский, итальянский и испанский, если вы должны знать). Также не работает для непечатаемых ключей, очевидно.
— Florian Bösch
9
Это также дает сбой при использовании чисел на цифровой клавиатуре, e.keyCode не является кодом ASCII (или даже UTF-x).
— Том Чивертон
2
Плохой ответ, он даже не работает с основными персонажами. Например, точка с запятой keyCode - 186, запустите String.fromCharCode (), и вы получите мусор. Проблема в том, что keyCode не соответствует ASCII для всех символов. Символ ASCII для точки с запятой - 59. Та же проблема верна для каждого специального символа, keyCode НЕ возвращает правильный код для String.fromCharCode ().
— Александр Цепков
193

По моему опыту String.fromCharCode(e.keyCode) это ненадежно. String.fromCharCodeожидает, что в качестве аргумента используются юникодные коды; e.keyCodeвозвращает коды клавиш JavaScript. Javascript keycode и unicode charcodes - это не одно и то же! В частности, клавиши цифровой клавиатуры возвращают отличные keycodeот обычных цифровых клавиш (поскольку они являются разными клавишами), в то время как одни и те же клавиши keycodeвозвращаются для букв upperи lowercaseбукв (в обоих случаях вы нажимали одну и ту же клавишу), несмотря на то, что они различаются charcodes.

Например, обычная keycodeцифровая клавиша 1 генерирует событие с 49, а цифровая клавиша 1 (с включенным Numlock) генерирует keycode97. При использовании с String.fromCharCodeмы получаем следующее:

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

String.fromCharCodeожидает кодировки Unicode, а не коды JavaScript. Клавиша aгенерирует событие с keycode65, независимо от регистра символа, который она сгенерирует (также имеется модификатор для Shiftнажатия клавиши и т. Д. В событии). У персонажа aесть юникодcharcode из 61 в то время как персонаж Aимеет charcodeиз 41 (согласно, например, http://www.utf8-chartable.de/ ). Тем не менее, это hexзначения, преобразование в десятичную дает нам charcode65 для «А» и 97 для «а». [1] Это согласуется с тем, что мы получаем String.fromCharCodeдля этих значений.

Мое собственное требование было ограничено обработкой чисел и обычных букв (принятие или отклонение в зависимости от позиции в строке) и Fпропуском управляющих символов ( -keys, -something Ctrl). Таким образом, я могу проверить контрольные символы, если это не контрольный символ, который я проверяю по диапазону, и только тогда мне нужно получить фактический символ. Учитывая, что я не беспокоюсь о регистре (я в любом случае меняю все буквы на верхний регистр) и уже ограничил диапазон кодов клавиш, мне остается только беспокоиться о клавишах цифровой клавиатуры. Для этого достаточно:

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

В целом, функция для надежного возврата символа из a charcodeбыла бы полезной (возможно, как плагин jQuery), но у меня нет времени, чтобы написать ее сейчас. Сожалею.

Я бы также упомянул e.which (если вы используете jQuery), который нормализует e.keyCodeи e.charCode, так что вам не нужно беспокоиться о том, какая клавиша была нажата. Проблема с его объединением String.fromCharCodeостается.

[1] Я был сбит с толку некоторое время -. во всех документах говорится, что String.fromCharCodeожидается Unicode charcode, хотя на практике он работал для кодов ASCII, но это было, я думаю, из-за необходимости преобразования в десятичную систему из шестнадцатеричного кода в сочетании с тем фактом, что ASCII-коды и десятичные кодировки Unicode перекрываются для обычных латинские буквы.

— Адам
источник
2
Этот комментарий в значительной степени разгадал все мои проблемы. Мне удивительно, что jQuery не реализовал "fromKeyCode", эквивалентный javascript "String.fromCharCode"
— Крис J
28
Кажется, что событие KeyPress делает это. См. Stackoverflow.com/a/9350415/209568 . Из документов jQuery «Обратите внимание, что при нажатии клавиш и при нажатии клавиши указывается код, указывающий, какая клавиша нажата, а при нажатии клавиши указывается, какой символ был введен. Например, строчная буква« а »будет отображаться как 65 при нажатии клавиш и при нажатии клавиш, а как 97 при нажатии клавиш. . Во всех событиях в верхнем регистре "A" указывается 65. Из-за этого различия при отлове специальных нажатий клавиш, таких как клавиши со стрелками, лучше использовать .keydown () или .keyup (). "
— Адам
Это наиболее неприятно для тех из нас, кто зависим от нажатия клавиш.
— Исаак Болингер
Примечание к этому последнему биту об ASCII и Unicode. Unicode имеет все 128 символов ASCII в одном месте. Это было сделано намеренно, чтобы любой файл, изначально закодированный как ASCII, мог маскироваться как (и быть преобразован в) Unicode без какой-либо работы. Расширенные символы ASCII находятся не в одном месте, поэтому, если вы использовали эти символы, вам не повезло.
— DanielM
1
Суть в keyCodeтом, чтобы знать, какая клавиша была нажата, а не в том, какой символ использовать. Например, «U» на клавиатуре «Дворжак» имеет тот же код клавиши, что и «F» на клавиатуре QWERTY или «ㄹ» на корейской клавиатуре и т. Д. Дело не в том, чтобы преобразовать его в символ, оно есть, чтобы вы могли легко сопоставить вещи с позиции клавиатуры.
— Винсент Макнабб
77

Читаемые имена ключей, проиндексированные кодом ключа

Ключевых кодов относительно немного, поэтому я просто перечислил все соответствующие значения в статическом массиве, чтобы я мог просто преобразовать число 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

Клавиша Tab: (9)

keyboardMap[9];  // TAB

Введите ключ: (13)

keyboardMap[13];  // ENTER

Клавиша пробела: (32)

keyboardMap[32];  // SPACE

Специфичный для ОС ключ (91) Windows Key (Windows) или Command Key (Mac)

keyboardMap[91];  // OS_KEY

Alt Key: (18)

keyboardMap[18];  // ALT

Ключ управления: (17)

keyboardMap[17];  // CONTROL

Клавиша Shift: (16)

keyboardMap[16];  // SHIFT

Ключ замка Caps: (20)

keyboardMap[20];  // CAPS_LOCK
— DaveAlger
источник
не работает для специальных символов, если клавиши ввода с клавишей Shift, какое-либо решение?
— Shaik Matheen
14

Просто важное примечание: принятый ответ выше не будет работать правильно для 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"/>
Развернуть фрагмент

— galarant
источник
1
Вы будете путать людей, используя letв ответе на вопрос 2009 года. :-)
— Дэвид Мердок
12
Если кто-то обнаружит ES6, подняв глаза, letто я сделаю им одолжение ;-)
— galarant
@galarant Можете ли вы объяснить, почему / как это работает?
— Ижар Аазми
@IzharAazmi добавил объяснение. Надеюсь, поможет!
— галарант
1
Он также не работает правильно для цифровых клавиш на цифровой клавиатуре (сетка клавиш справа от расширенных клавиатур).
— Скотт Бьюкенен
2

Я предполагаю, что это для игры или для быстродействующего типа приложения, поэтому использование KEYDOWN, а не KEYPRESS.

Редактировать : Черт! Я исправлен (спасибо Crescent Fresh и David): JQuery (или, скорее, базовые хосты DOM) не раскрывают детали WM_KEYDOWN и других событий. Скорее они предварительно переваривают эти данные и, в случае keyDown даже в JQuery, мы получаем:

Обратите внимание, что эти свойства являются значениями UniCode.
Обратите внимание, я не смог найти авторитетную ссылку на это в документах 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
— MJV
источник
хм, нет, scanCode всегда приводит к 0. И e.KeyCode должен быть e.keyCode (KeyCode не определен).
— Дэвид Мердок
Эй, сейчас ... Привет, подожди ... а? Мы говорим на JScript здесь или что-то?
— Crescent Fresh
@ Дэвид М. Мой плохой, может быть, JQuery «предварительно переваривает» эти части кода для нас. Я смотрю на это сейчас.
— MJV
1
@mjv: где ты взял этот код? Это сработало для вас? Реализация AFAIK no DOM кодирует всю эту информацию в объект события ( keydownили нет).
— Crescent Fresh
@Crescent: я быстро и наивно адаптировал его из своего собственного java-кода, в чем-то старости ... В любом случае, вы абсолютно правы: ни один из хостов DOM не раздает такие необработанные события, даже для клавиатуры. Я исправил свою прозу соответственно; все еще ищите авторитетный документ на эту тему от JQuery.com
— mjv
0

Я знаю, что это старый вопрос, но я наткнулся на него сегодня в поисках готового решения этой проблемы и не нашел ничего, что действительно отвечало бы моим потребностям.

Вот решение (только на английском языке), которое правильно поддерживает прописные буквы (сдвинутые), строчные буквы, знаки препинания, цифровую клавиатуру и т. Д.

Он также позволяет легко и просто идентифицировать и реагировать на непечатаемые клавиши, такие как ESC, стрелки, функциональные клавиши и т. Д.

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

keyboardCharMap and keyboardNameMap are the key to making this work

Спасибо DaveAlger за то, что он сэкономил мне немного печати и много открытий! - предоставив массив именованных ключей.

— BRebey
источник
Ваша скрипка самая превосходная! Спасибо, что поделился. Работает отлично. Я использую его для реализации мульти-курсорного редактирования Sublime-стиля для полей формы с элементами, имеющими одинаковые значения
— Тодд Хаммер
0

Недавно я написал модуль под названием keysight , который транслирует keypress, keydownи keyupсобытия в символы и ключи соответственно.

Пример: 

 element.addEventListener("keydown", function(event) {
    var character = keysight(event).char
 })
— BT
источник
он поддерживает такие ключи, как?
— Арнольд Роа
@ArnoldRoa Я только что выдвинул что-то, что, надеюсь, будет поддерживать таких персонажей. У меня нет клавиатуры с акцентированными символами, не могли бы вы протестировать?
— BT
0

Для тех из вас, кто пришел сюда в поисках фактических значений символов Unicode для кода клавиши, как я сделал, вот функция для этого. Например, если код клавиши Unicode направлен на стрелку вправо, это выведет видимую строку\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;
}
— д'Артаньян Вечнозеленая Барбоза
источник
0

Вы также можете использовать свойство только для чтения key. Это также уважает специальные ключи, такие какshift и т. Д. И поддерживается IE9.

Когда нажимается непечатаемый или специальный символ, значение будет одним из определенных значений клавиш, таких как 'Shift'или 'Multiply'.

  • клавиатура     event.key
  • X             -> 'x'
  • Shift+ X ->'X'
  • F5            -> 'F5'
— Ким Керн
источник
-2

Перейдите по этой ссылке Получить код клавиши от нажатия клавиши и значение символа для любого кода клавиши

$('input#inp').keyup(function(e){
   $(this).val(String.fromCharCode(e.keyCode)); 
   $('div#output').html('Keycode : ' + e.keyCode);  
});
— user2269057
источник
1
Это неверно! Так как он не учитывает текущий язык, включенный на клавиатуре пользователя. Например, я ввожу «ф», но это дает «а» ...
— Вадим Гузев
это неверно, текст будет меняться в зависимости от раскладки клавиатуры
— Арнольд Роа
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.