ค่าคงที่ event.keyCode

คุณสามารถกำหนด KeyEvent object ได้ หาก ไม่มีอยู่:

if (typeof KeyEvent == "undefined") {
    var KeyEvent = {
        DOM_VK_CANCEL: 3,
        DOM_VK_HELP: 6,
        DOM_VK_BACK_SPACE: 8,
        DOM_VK_TAB: 9,
        DOM_VK_CLEAR: 12,
        DOM_VK_RETURN: 13,
        DOM_VK_ENTER: 14,
        DOM_VK_SHIFT: 16,
        DOM_VK_CONTROL: 17,
        DOM_VK_ALT: 18,
        DOM_VK_PAUSE: 19,
        DOM_VK_CAPS_LOCK: 20,
        DOM_VK_ESCAPE: 27,
        DOM_VK_SPACE: 32,
        DOM_VK_PAGE_UP: 33,
        DOM_VK_PAGE_DOWN: 34,
        DOM_VK_END: 35,
        DOM_VK_HOME: 36,
        DOM_VK_LEFT: 37,
        DOM_VK_UP: 38,
        DOM_VK_RIGHT: 39,
        DOM_VK_DOWN: 40,
        DOM_VK_PRINTSCREEN: 44,
        DOM_VK_INSERT: 45,
        DOM_VK_DELETE: 46,
        DOM_VK_0: 48,
        DOM_VK_1: 49,
        DOM_VK_2: 50,
        DOM_VK_3: 51,
        DOM_VK_4: 52,
        DOM_VK_5: 53,
        DOM_VK_6: 54,
        DOM_VK_7: 55,
        DOM_VK_8: 56,
        DOM_VK_9: 57,
        DOM_VK_SEMICOLON: 59,
        DOM_VK_EQUALS: 61,
        DOM_VK_A: 65,
        DOM_VK_B: 66,
        DOM_VK_C: 67,
        DOM_VK_D: 68,
        DOM_VK_E: 69,
        DOM_VK_F: 70,
        DOM_VK_G: 71,
        DOM_VK_H: 72,
        DOM_VK_I: 73,
        DOM_VK_J: 74,
        DOM_VK_K: 75,
        DOM_VK_L: 76,
        DOM_VK_M: 77,
        DOM_VK_N: 78,
        DOM_VK_O: 79,
        DOM_VK_P: 80,
        DOM_VK_Q: 81,
        DOM_VK_R: 82,
        DOM_VK_S: 83,
        DOM_VK_T: 84,
        DOM_VK_U: 85,
        DOM_VK_V: 86,
        DOM_VK_W: 87,
        DOM_VK_X: 88,
        DOM_VK_Y: 89,
        DOM_VK_Z: 90,
        DOM_VK_CONTEXT_MENU: 93,
        DOM_VK_NUMPAD0: 96,
        DOM_VK_NUMPAD1: 97,
        DOM_VK_NUMPAD2: 98,
        DOM_VK_NUMPAD3: 99,
        DOM_VK_NUMPAD4: 100,
        DOM_VK_NUMPAD5: 101,
        DOM_VK_NUMPAD6: 102,
        DOM_VK_NUMPAD7: 103,
        DOM_VK_NUMPAD8: 104,
        DOM_VK_NUMPAD9: 105,
        DOM_VK_MULTIPLY: 106,
        DOM_VK_ADD: 107,
        DOM_VK_SEPARATOR: 108,
        DOM_VK_SUBTRACT: 109,
        DOM_VK_DECIMAL: 110,
        DOM_VK_DIVIDE: 111,
        DOM_VK_F1: 112,
        DOM_VK_F2: 113,
        DOM_VK_F3: 114,
        DOM_VK_F4: 115,
        DOM_VK_F5: 116,
        DOM_VK_F6: 117,
        DOM_VK_F7: 118,
        DOM_VK_F8: 119,
        DOM_VK_F9: 120,
        DOM_VK_F10: 121,
        DOM_VK_F11: 122,
        DOM_VK_F12: 123,
        DOM_VK_F13: 124,
        DOM_VK_F14: 125,
        DOM_VK_F15: 126,
        DOM_VK_F16: 127,
        DOM_VK_F17: 128,
        DOM_VK_F18: 129,
        DOM_VK_F19: 130,
        DOM_VK_F20: 131,
        DOM_VK_F21: 132,
        DOM_VK_F22: 133,
        DOM_VK_F23: 134,
        DOM_VK_F24: 135,
        DOM_VK_NUM_LOCK: 144,
        DOM_VK_SCROLL_LOCK: 145,
        DOM_VK_COMMA: 188,
        DOM_VK_PERIOD: 190,
        DOM_VK_SLASH: 191,
        DOM_VK_BACK_QUOTE: 192,
        DOM_VK_OPEN_BRACKET: 219,
        DOM_VK_BACK_SLASH: 220,
        DOM_VK_CLOSE_BRACKET: 221,
        DOM_VK_QUOTE: 222,
        DOM_VK_META: 224
    };
}

ดูเพิ่มเติมที่ KeyEvent ใน DOM ระดับ 3

กระบวนการมาตรฐานสำหรับการป้อนข้อมูลด้วยแป้นพิมพ์ในเว็บเบราว์เซอร์ดำเนินไปอย่างต่อเนื่องในช่วง 15 ปีที่ผ่านมาเท่านั้น ปรากฎว่ามันไม่ใช่ปัญหาง่ายๆ

ใน 2010 อินเทอร์เฟซ KeyEvent ถูกแทนที่ด้วย KeyboardEvent โดย W3C ในแบบร่างการทำงาน รายการรหัสคีย์ DOM_VK_ ไม่เห็นการทำงานมาตรฐานเพิ่มเติม และไม่น่าจะมีความสอดคล้องกัน: รหัสคีย์บางรหัสแตกต่างกันระหว่างแพลตฟอร์ม และแม้แต่ระหว่างเบราว์เซอร์บนแพลตฟอร์มเดียวกัน อินเทอร์เฟซ KeyboardEvent เป็นความพยายามที่จะทำให้เหตุการณ์สำคัญมีความสอดคล้องกัน

อย่างไรก็ตาม ในขณะที่เขียนความคิดเห็นนี้ ความเข้ากันได้ของเบราว์เซอร์สำหรับ KeyboardEvent สามารถอธิบายได้ เป็นเขตภัยพิบัติ มีเบราว์เซอร์เพียงไม่กี่ตัวที่รองรับ KeyboardEvent.key แต่หวังว่าจะเป็นเช่นนั้น ให้มีความสม่ำเสมอมากขึ้นในอนาคต เป็นสตริงที่อธิบายคีย์ ไม่ใช่ค่าตัวเลข รายการค่าที่เสนอคือ W3C Working Draft

ฉันพบ shim สำหรับ KeyboardEvent.key หนึ่งอัน แต่เห็นได้ชัดว่า ยังไม่ทันสมัยกับข้อกำหนด

เป็นไปได้ว่าเรื่องนี้จะจบลงอย่างมีความสุข

นอกจากนี้ คุณยังสามารถใช้แพ็กเกจ npm แบบไลท์เวท keycode-js ได้ ซึ่งประกอบด้วยรายการค่าคงที่ของรหัสคีย์ทั้งหมดและใช้งานง่าย

นี่คือวิธีการใช้งาน https://github.com/kabirbaidhya/keycode-js#usage< /ก>

// You may use either the numeric code value or the code to identity the key.
console.log("Return key code:", KeyCode.KEY_RETURN);
console.log("Return key name:", KeyCode.CODE_RETURN);
console.log("Return key value:", KeyCode.VALUE_RETURN);

// Use it in the event handler
window.addEventListener('keyup', function(e) {
  // You may do one of these checks.

  // Check the code value.
  if (e.code === KeyCode.CODE_RETURN) {
    console.log('It was the Return key.');
    return;
  }

  // OR, check the keyCode value.
  if (e.keyCode === KeyCode.KEY_RETURN) {
    console.log('It was the Return key.');
    return;
  }

  // OR, check the key value.
  if (e.key === KeyCode.VALUE_RETURN) {
    console.log('It was the Return key.');
    return;
  }

  console.log('It was any other key.');
});

<script src="https://unpkg.com/[email protected]/dist/keycode.min.js"></script>

นี่คือรายการ ค่าคงที่ที่รองรับ รายการนี้อิงตามรายการอย่างเป็นทางการของรหัสเหตุการณ์หลักที่แสดงอยู่ใน เอ็มดีเอ็น.

แพ็คเกจนี้ไม่มีอะไรมากไปกว่ารายการรหัสคีย์ดังนี้:

exports.KEY_CANCEL = 3;
exports.KEY_HELP = 6;
exports.KEY_BACK_SPACE = 8;
exports.KEY_TAB = 9;
exports.KEY_CLEAR = 12;
exports.KEY_RETURN = 13;
exports.KEY_ENTER = 14;
exports.KEY_SHIFT = 16;
exports.KEY_CONTROL = 17;
exports.KEY_ALT = 18;
exports.KEY_PAUSE = 19;
exports.KEY_CAPS_LOCK = 20;
exports.KEY_ESCAPE = 27;
exports.KEY_SPACE = 32;
exports.KEY_PAGE_UP = 33;
exports.KEY_PAGE_DOWN = 34;
exports.KEY_END = 35;
exports.KEY_HOME = 36;
exports.KEY_LEFT = 37;
exports.KEY_UP = 38;
exports.KEY_RIGHT = 39;
exports.KEY_DOWN = 40;
exports.KEY_PRINTSCREEN = 44;
exports.KEY_INSERT = 45;
exports.KEY_DELETE = 46;
exports.KEY_0 = 48;
exports.KEY_1 = 49;
exports.KEY_2 = 50;
exports.KEY_3 = 51;
exports.KEY_4 = 52;
exports.KEY_5 = 53;
exports.KEY_6 = 54;
exports.KEY_7 = 55;
exports.KEY_8 = 56;
exports.KEY_9 = 57;
exports.KEY_SEMICOLON = 59;
exports.KEY_EQUALS = 61;
exports.KEY_A = 65;
exports.KEY_B = 66;
exports.KEY_C = 67;
exports.KEY_D = 68;
exports.KEY_E = 69;
exports.KEY_F = 70;
exports.KEY_G = 71;
exports.KEY_H = 72;
exports.KEY_I = 73;
exports.KEY_J = 74;
exports.KEY_K = 75;
exports.KEY_L = 76;
exports.KEY_M = 77;
exports.KEY_N = 78;
exports.KEY_O = 79;
exports.KEY_P = 80;
exports.KEY_Q = 81;
exports.KEY_R = 82;
exports.KEY_S = 83;
exports.KEY_T = 84;
exports.KEY_U = 85;
exports.KEY_V = 86;
exports.KEY_W = 87;
exports.KEY_X = 88;
exports.KEY_Y = 89;
exports.KEY_Z = 90;
exports.KEY_CONTEXT_MENU = 93;
exports.KEY_NUMPAD0 = 96;
exports.KEY_NUMPAD1 = 97;
exports.KEY_NUMPAD2 = 98;
exports.KEY_NUMPAD3 = 99;
exports.KEY_NUMPAD4 = 100;
exports.KEY_NUMPAD5 = 101;
exports.KEY_NUMPAD6 = 102;
exports.KEY_NUMPAD7 = 103;
exports.KEY_NUMPAD8 = 104;
exports.KEY_NUMPAD9 = 105;
exports.KEY_MULTIPLY = 106;
exports.KEY_ADD = 107;
exports.KEY_SEPARATOR = 108;
exports.KEY_SUBTRACT = 109;
exports.KEY_DECIMAL = 110;
exports.KEY_DIVIDE = 111;
exports.KEY_F1 = 112;
exports.KEY_F2 = 113;
exports.KEY_F3 = 114;
exports.KEY_F4 = 115;
exports.KEY_F5 = 116;
exports.KEY_F6 = 117;
exports.KEY_F7 = 118;
exports.KEY_F8 = 119;
exports.KEY_F9 = 120;
exports.KEY_F10 = 121;
exports.KEY_F11 = 122;
exports.KEY_F12 = 123;
exports.KEY_F13 = 124;
exports.KEY_F14 = 125;
exports.KEY_F15 = 126;
exports.KEY_F16 = 127;
exports.KEY_F17 = 128;
exports.KEY_F18 = 129;
exports.KEY_F19 = 130;
exports.KEY_F20 = 131;
exports.KEY_F21 = 132;
exports.KEY_F22 = 133;
exports.KEY_F23 = 134;
exports.KEY_F24 = 135;
exports.KEY_NUM_LOCK = 144;
exports.KEY_SCROLL_LOCK = 145;
exports.KEY_COMMA = 188;
exports.KEY_PERIOD = 190;
exports.KEY_SLASH = 191;
exports.KEY_BACK_QUOTE = 192;
exports.KEY_OPEN_BRACKET = 219;
exports.KEY_BACK_SLASH = 220;
exports.KEY_CLOSE_BRACKET = 221;
exports.KEY_QUOTE = 222;
exports.KEY_META = 224;

ฉันใช้วิธีแก้ปัญหาจาก @Gumbo มาระยะหนึ่งแล้ว เนื่องจากฉันมีโปรเจ็กต์หลายโปรเจ็กต์ที่ต้องการออบเจ็กต์นี้ ฉันจึงสร้างแพ็คเกจ Bower สำหรับมันขึ้นมา ใครเคยทำแล้วแจ้งด้วยนะครับ...

เพียง bower install keyevent -S และรวม bower_components/src/keyevent.js ในกระบวนการสร้างของคุณ

หมายเหตุ: ไลบรารีนี้โง่เขลา หากมีอินสแตนซ์ KeyEvent อยู่แล้ว ก็มีแนวโน้มที่จะปิดบัง

ที่เก็บ GitHub: https://github.com/cybertoothca/keyevent

bower info keyeventเพื่อรับข้อมูลเกี่ยวกับโครงการ