【问题标题】:Get Character value from KeyCode in JavaScript... then trim从 JavaScript 中的 KeyCode 获取字符值...然后修剪
【发布时间】:2010-12-18 20:02:01
【问题描述】:

这就是我现在拥有的:

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

如果e.keyCode 可能不是 ASCII 字符(Alt退格del箭头 , 等等。)... 我现在需要以某种方式从valuetrim 这些值(最好以编程方式——而不是使用查找表)。

我正在使用 jQuery。

我必须使用keydown 事件。 keyPress 不会激活我需要捕获的某些键(Escdelbackspace 等)。

我不能使用setTimeout 来获取输入的值。 setTimeout(function(){},0) 太慢了。

【问题讨论】:

  • 您必须使用keydown 来捕获字符代码?您将大吃一惊:quirksmode.org/js/keys.html(提示:使用keypress!!
  • 字符的大小写无关紧要。我需要为至少 FF 和 IE 捕获上、下、左、右、esc、del、退格;所以按键是不可能的。不过感谢您的提示。 :-)
  • 针对这个问题,我刚刚写了一个jQuery插件:github.com/bpeacock/key-to-charCode 有点简陋和肮脏,可以更好地集成到jQuery中,但它是一个开始。
  • 对于任何来到这里试图解决 KeyCode 问题但真的只是想看看按下了什么键的人,请查看 this answer。 TLDR:document.onkeydown = function(e){ console.log('Key: ' + e.key); }

标签: javascript jquery special-characters keycode


【解决方案1】:

您也可以使用只读属性key。它还尊重 shift 等特殊键,并受 IE9 支持。

当按下不可打印或特殊字符时,值将在定义的key values 中打开,例如'Shift''Multiply'

  • 键盘   event.key
  • X             -> 'x'
  • Shift+X -> 'X'
  • F5            -> 'F5'

【讨论】:

    【解决方案2】:

    对于那些来这里寻找键码的实际 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;
    }
    

    【讨论】:

      【解决方案3】:

      重要说明:上面接受的答案对于 keyCode >= 144 将无法正常工作,即句点、逗号、破折号等。对于那些您应该使用更通用的算法:

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

      如果你好奇为什么,这显然是必要的,因为内置 JS 函数 String.fromCharCode() 的行为。对于keyCode &lt;= 96 的值,它似乎使用函数进行映射:

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

      对于keyCode &gt; 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);
      };
      &lt;input type="text" placeholder="Focus and Type"/&gt;

      【讨论】:

      • 在回答 2009 年的问题时,您会使用 let 来迷惑人们。:-)
      • 如果有人通过查找 let 发现了 ES6,那么我帮了他们一个忙 ;-)
      • @galarant 你能解释一下为什么/如何工作吗?
      • @IzharAazmi 添加了解释。希望对您有所帮助!
      • 数字小键盘上的数字键(扩展键盘右侧的键网格)也不能正常工作。
      【解决方案4】:

      我最近编写了一个名为keysight 的模块,它将keypresskeydownkeyup 事件分别转换为字符和键。

      例子:

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

      【讨论】:

      • 它是否支持像ñ这样的键?
      • @ArnoldRoa 我刚刚推送了一些希望支持这样的字符的东西。我没有带重音字符的键盘,您介意测试一下吗?
      【解决方案5】:

      我知道这是一个老问题,但我今天遇到了这个问题,寻找这个问题的预打包解决方案,但没有找到真正满足我需求的东西。

      这是一个正确支持大写(移位)、小写、标点符号、数字键盘等的解决方案(仅英文)。

      它还允许简单直接地识别和响应不可打印的键,例如 ESC、箭头、功能键等。

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

      keyboardCharMap and keyboardNameMap are the key to making this work
      

      感谢 DaveAlger 为我节省了一些打字时间 - 以及很多发现! - 通过提供命名密钥数组。

      【讨论】:

      • 你的小提琴最棒了!感谢分享。它工作得很好。我正在使用它为具有相同值的项目的表单字段实现 Sublime 样式的多光标编辑
      【解决方案6】:

      根据我的经验,String.fromCharCode(e.keyCode) 是不可靠的。 String.fromCharCode 期望 unicode 字符码作为参数; e.keyCode 返回 javascript 键码。 Javascript 键码和 unicode 字符码是一回事!特别是,数字键盘键返回与普通数字键不同的keycode(因为它们是不同的键),而upperlowercase 字母返回相同的keycode(您在两者中都按下了相同的键案例),尽管它们具有不同的charcodes

      例如,普通数字键 1 生成带有 keycode 49 的事件,而数字键盘键 1(打开 Numlock)生成 keycode 97。与 String.fromCharCode 一起使用,我们得到以下信息:

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

      String.fromCharCode 需要 unicode 字符码,而不是 javascript 键码。 a 键生成一个keycode 为 65 的事件,与它将生成的字符的大小写无关(如果 Shift 键是按下等)。字符 a 的 unicode charcode 为 61,而字符 Acharcode 为 41(例如,根据 http://www.utf8-chartable.de/)。但是,这些是 hex 值,转换为十进制后,我们得到的 charcode 为 65,“A”为 65,“a”为 97。[1]这与我们从String.fromCharCode 获得的这些值一致。

      我自己的要求仅限于处理数字和普通字母(接受或拒绝取决于字符串中的位置)和让控制字符(F-keys, Ctrl -某事)通过。因此我可以检查控制字符,如果它不是控制字符,我会检查一个范围,然后才需要获取实际字符。鉴于我不担心大小写(无论如何我将所有字母都更改为大写)并且已经限制了键码的范围,我只需要担心数字键盘键。以下就足够了:

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

      更一般地说,一个可靠地从charcode 返回字符的函数会很棒(也许作为一个jQuery 插件),但我现在没有时间写它。对不起。

      我还提到了e.which(如果您使用的是 jQuery),它标准化了e.keyCodee.charCode,这样您就不必担心按下了哪种键。将它与String.fromCharCode 结合起来的问题仍然存在。

      [1] 我一时糊涂了-。所有文档都说String.fromCharCode 需要一个 unicode charcode,而实际上它似乎适用于 ASCII 字符码,但我认为这是因为需要从十六进制转换为十进制,再加上 ASCII 字符码和unicode 十进制字符码与普通拉丁字母重叠。

      【讨论】:

      • 这条评论几乎解决了我所有的问题。令我惊讶的是,jQuery 没有实现与 javascript 的“String.fromCharCode”等效的“fromKeyCode”
      • 看来 KeyPress 事件是这样做的。见stackoverflow.com/a/9350415/209568。从 jQuery 文档“请注意,keydown 和 keyup 提供了指示按下哪个键的代码,而 keypress 指示输入了哪个字符。例如,小写的“a”将通过 keydown 和 keyup 报告为 65,但通过 keypress 报告为 97 . 大写的“A”在所有事件中都报告为 65。由于这种区别,当捕获特殊按键(如箭头键)时,.keydown() 或 .keyup() 是更好的选择。"
      • 这对于我们这些沉迷于 keydown 的人来说是最不愉快的。
      • 最后一点关于 ASCII 和 Unicode 的注释。 Unicode 在同一个地方有所有 128 个 ASCII 字符。这是故意的,因此任何最初编码为 ASCII 的文件都可以伪装成(并转换为)Unicode,而无需进行任何工作。但是扩展的 ASCII 字符不在同一个地方,所以如果你使用了这些字符,那你就不走运了。
      • keyCode 的重点是知道按下了什么键,而不知道使用什么字符。例如,Dvorak 键盘上的“U”与 QWERTY 键盘上的“F”或韩语键盘上的“ㄹ”等具有相同的键码。重点不是将其转换为字符,它存在以便您可以轻松将事物映射到键盘位置。
      【解决方案7】:

      键码索引的可读键名

      键码相对较少,所以我只是在一个静态数组中列出了所有对应的值,这样我就可以使用keyboardMap[65]简单地将数字65转换为A

      并非所有键码都映射到可打印字符,因此会返回一些其他可识别的字符串。

      您可能需要修改数组以满足您的需要,并且可以简单地为您不想翻译的所有字符返回空字符串。以下数组使我能够快速可靠地确定在任何环境中按下了哪个键。享受吧!

      // 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]
      ];
      

      注意: 上面数组中每个值的位置很重要。"" 是未知值代码的占位符。

      使用这种静态数组查找方法尝试以下代码 sn-p...

      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];  // TAB
      

      输入键: (13)

      keyboardMap[13];  // ENTER
      

      空格键: (32)

      keyboardMap[32];  // SPACE
      

      操作系统特定键 (91) Windows 键 (Windows) 或命令键 (Mac)

      keyboardMap[91];  // OS_KEY
      

      Alt 键: (18)

      keyboardMap[18];  // ALT
      

      控制键: (17)

      keyboardMap[17];  // CONTROL
      

      Shift 键: (16)

      keyboardMap[16];  // SHIFT
      

      大写锁定键: (20)

      keyboardMap[20];  // CAPS_LOCK
      

      【讨论】:

      • 不适用于特殊字符,如果用 shift 键输入键,有什么解决办法吗?
      【解决方案8】:

      也许我没有正确理解这个问题,但是如果你想同时捕获两个输入,你可以不使用keyup 吗?

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

      【讨论】:

      • 这不适用于 ASCII 范围之外的其他语言环境(例如 latin-1,例如德语、法语、意大利语和西班牙语,如果您必须知道的话)。显然,不可打印的键也失败了。
      • 在数字键盘上使用数字时也会失败,e.keyCode 不是 ASCII(甚至 UTF-x)代码。
      • 错误的答案,它甚至不适用于基本字符。例如,分号 keyCode 是 186,在其上运行 String.fromCharCode() 会得到垃圾。问题是 keyCode 并不对应于所有字符的 ASCII。分号的 ASCII 字符是 59。每个特殊字符都存在同样的问题,keyCode 不会为 String.fromCharCode() 返回正确的代码。
      【解决方案9】:

      参考这个链接 Get Keycode from key press and char value for any key code

      $('input#inp').keyup(function(e){
         $(this).val(String.fromCharCode(e.keyCode)); 
         $('div#output').html('Keycode : ' + e.keyCode);  
      });
      

      【讨论】:

      • 这是不正确的!因为它没有考虑用户键盘上启用的当前语言。例如,我输入'ф',但它给出'a'......
      • 这是不正确的,文字会根据键盘布局改变
      【解决方案10】:

      我假设这是用于游戏或快速响应类型的应用程序,因此使用 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
      

      【讨论】:

      • hm,不行,scanCode 总是返回 0。而 e.KeyCode 应该是 e.keyCode(KeyCode 未定义)。
      • 嘿现在...您好,等等...什么?我们在这里谈论 JScript 还是什么?
      • @David M. 我的错,也许 JQuery 为我们“预先消化”了这些代码部分。我现在正在调查。
      • @mjv:你从哪里得到这个代码的?它对你有用吗? AFAIK 没有 DOM 实现将所有信息编码到事件对象中(keydown 或不)。
      • @Crescent:我从我的一些 Java 代码中快速而天真地调整了它,那已经很老了......无论如何,你是完全正确的:没有一个 DOM 主机分发任何这样的原始事件,即使是键盘。我相应地修正了我的散文;仍在从 JQuery.com 寻找有关该主题的权威文档
      猜你喜欢
      • 2014-01-01
      • 1970-01-01
      • 2013-07-09
      • 1970-01-01
      • 2012-01-15
      • 2017-01-02
      • 2013-08-28
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多