javascript – Keyboard shortcut system with special characters

Question:

Hi, I'm making a system to detect shortcuts in javascript, and it works very well, except if for example I click on SHIFT + 1 which I get SHIFT+! , and all the other changes that shift makes. Is there any way to standardize this?

Below is the code I made, can anyone help?

/**
 * This function convert pressed keys in formatted string.
 *
 * @param {Object} event - The event.
 *
 * @returns {string} Returns string formated.
 * E.g.: "CTRL+A"
 */
function convertToStringPressedKeys(event) {
  const specialKeys = [
    {
      key: "ctrlKey",
      original: "CONTROL",
      value: "CTRL"
    },
    {
      key: "altKey",
      original: "ALT",
      value: "ALT"
    },
    {
      key: "shiftKey",
      original: "SHIFT",
      value: "SHIFT"
    }
  ];

  const pressedKey = specialKeys
    .filter(specialKey => event[specialKey.key])
    .map(specialKey => specialKey.value);

  const keyPressed = event.key.toUpperCase();

  const kepPressedIsSpecial = specialKeys.find(
    key => key.original === keyPressed
  );

  !kepPressedIsSpecial && pressedKey.push(keyPressed);

  return pressedKey.join("+");
};

 function handleOnKeyDown(event) {
    const combinationKeys = convertToStringPressedKeys(event);
    console.log(combinationKeys);
    event.preventDefault();
   
  }


document.body.addEventListener('keydown', handleOnKeyDown);

Answer:

Hi!

You can take the keyCode of the pressed key and convert it to string as follows:

String.fromCharCode(event.keyCode)

To simplify, you could even validate by the keyCode of special keys like for example:

  /**
     * This function convert pressed keys in formatted string.
     *
     * @param {Object} event - The event.
     *
     * @returns {string} Returns string formated.
     * E.g.: "CTRL+A"
     */
    function convertToStringPressedKeys(event) {
      const specialKeys = [
        {
          key: "ctrlKey",
          code: 17,
          value: "CTRL"
        },
        {
          key: "altKey",
          code: 18,
          value: "ALT"
        },
        {
          key: "shiftKey",
          code: 16,
          value: "SHIFT"
        }
      ];

      const pressedKey = specialKeys
        .filter(specialKey => event[specialKey.key])
        .map(specialKey => specialKey.value);

      const keyPressed = event.keyCode;

      const kepPressedIsSpecial = specialKeys.find(
        key => key.code === keyPressed
      );

      !kepPressedIsSpecial && pressedKey.push(String.fromCharCode(keyPressed));

      return pressedKey.join("+");
    };

     function handleOnKeyDown(event) {
        const combinationKeys = convertToStringPressedKeys(event);
        console.log(combinationKeys);
        
        /* Adicionado para fins de exemplo */
        document.getElementById("demo").innerHTML = combinationKeys
        /**/
        event.preventDefault();
       
      }

    document.body.addEventListener('keydown', handleOnKeyDown);
<input type="text" size="40" onkeydown="handleOnKeyDown">
<p id="demo"></p>
Scroll to Top