textarea-shorcuts.js

const vkeys = {
  0: 'unk',
  1: 'mouse1',
  2: 'mouse2',
  3: 'break',
  4: 'mouse3',
  5: 'mouse4',
  6: 'mouse5',
  8: 'backspace',
  9: 'tab',
  12: 'clear',
  13: 'enter',
  16: 'shift',
  17: 'ctrl',
  18: 'alt',
  19: 'pause',
  20: 'capslock',
  21: 'imehangul',
  23: 'imejunja',
  24: 'imefinal',
  25: 'imekanji',
  27: 'escape',
  28: 'imeconvert',
  29: 'imenonconvert',
  30: 'imeaccept',
  31: 'imemodechange',
  32: 'space',
  33: 'pageup',
  34: 'pagedown',
  35: 'end',
  36: 'home',
  37: 'left',
  38: 'up',
  39: 'right',
  40: 'down',
  41: 'select',
  42: 'print',
  43: 'execute',
  44: 'snapshot',
  45: 'insert',
  46: 'delete',
  47: 'help',
  48: '0',
  49: '1',
  50: '2',
  51: '3',
  52: '4',
  53: '5',
  54: '6',
  55: '7',
  56: '8',
  57: '9',
  58: ':',
  59: ';',
  60: '<',
  61: '=',
  62: '>',
  63: '?',
  64: '@',
  65: 'a',
  66: 'b',
  67: 'c',
  68: 'd',
  69: 'e',
  70: 'f',
  71: 'g',
  72: 'h',
  73: 'i',
  74: 'j',
  75: 'k',
  76: 'l',
  77: 'm',
  78: 'n',
  79: 'o',
  80: 'p',
  81: 'q',
  82: 'r',
  83: 's',
  84: 't',
  85: 'u',
  86: 'v',
  87: 'w',
  88: 'x',
  89: 'y',
  90: 'z',
  91: 'meta',
  92: 'meta',
  93: 'menu',
  95: 'sleep',
  96: 'num0',
  97: 'num1',
  98: 'num2',
  99: 'num3',
  100: 'num4',
  101: 'num5',
  102: 'num6',
  103: 'num7',
  104: 'num8',
  105: 'num9',
  106: 'num*',
  107: 'num+',
  108: 'numenter',
  109: 'num-',
  110: 'num.',
  111: 'num/',
  112: 'f1',
  113: 'f2',
  114: 'f3',
  115: 'f4',
  116: 'f5',
  117: 'f6',
  118: 'f7',
  119: 'f8',
  120: 'f9',
  121: 'f10',
  122: 'f11',
  123: 'f12',
  124: 'f13',
  125: 'f14',
  126: 'f15',
  127: 'f16',
  128: 'f17',
  129: 'f18',
  130: 'f19',
  131: 'f20',
  132: 'f21',
  133: 'f22',
  134: 'f23',
  135: 'f24',
  144: 'numlock',
  145: 'scrolllock',
  160: 'shiftleft',
  161: 'shiftright',
  162: 'ctrlleft',
  163: 'ctrlright',
  164: 'altleft',
  165: 'altright',
  166: 'browserback',
  167: 'browserforward',
  168: 'browserrefresh',
  169: 'browserstop',
  170: 'browsersearch',
  171: 'browserfavorites',
  172: 'browserhome',
  173: 'volumemute',
  174: 'volumedown',
  175: 'volumeup',
  176: 'nexttrack',
  177: 'prevtrack',
  178: 'stop',
  179: 'playpause',
  180: 'launchmail',
  181: 'launchmediaselect',
  182: 'launchapp1',
  183: 'launchapp2',
  186: ';',
  187: '=',
  188: ',',
  189: '-',
  190: '.',
  191: '/',
  192: '`',
  219: '[',
  220: '\\',
  221: ']',
  222: '\'',
  223: 'meta',
  224: 'meta',
  226: 'altgr',
  229: 'imeprocess',
  231: 'unicode',
  246: 'attention',
  247: 'crsel',
  248: 'exsel',
  249: 'eraseeof',
  250: 'play',
  251: 'zoom',
  252: 'noname',
  253: 'pa1',
  254: 'clear'
};

function getKey(code) {
  return vkeys[code];
};


const $textarea = document.getElementById('test');


function shortcutCheck(event, shortcut) {
  return shortcut
    .split('+')
    .map(key => key.toLowerCase())
    .map(key => {
      switch (key) {
        case 'ctrl':
          return event.ctrlKey;
        case 'alt':
          return event.altKey;
        case 'shift':
          return event.shiftKey;
        case 'meta':
          return event.metaKey;
        default:
          return getKey(event.keyCode || event.which) === key;
      }
    })
    .reduce((current, value) => value && current);
}


$textarea.addEventListener('keydown', event => {
  const isBold = shortcutCheck(event, 'ctrl+b') || shortcutCheck(event, 'meta+b');
  const isCtrlB = shortcutCheck(event, 'ctrl+b');
  const isMetaI = shortcutCheck(event, 'meta+i');
  const isTab = shortcutCheck(event, 'tab');

  console.log('is bold', isBold);
  console.log('is ctrl+b', isCtrlB);
  console.log('is meta+i', isMetaI);
  console.log('is tab', isTab);
  
  if (isTab) event.preventDefault();
});