Keyboard shortcut system with special characters

Asked

Viewed 68 times

3

Hello, I’m making a system to detect javascript shortcuts, and it works great, except if for example click on SHIFT + 1 what I get SHIFT+!, and all the other changes shift makes. There is some way to standardize this?

Below is the code I made, someone can help a little?

/**
 * 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);

javascript javascript-events

  • I liked the question. At my level of knowledge, I would do replacing the characters with Shift the equivalent without. Example: ! flipped 1, @ flipped 2, ... and, for the letters, just call the method toLowerCase()...

  • What you define as "unifying"?

  • When I talk about standardizing, it is for example imagine that a key can correspond to three different characters depending on whether SHIFT, CTRL, ALT are pressed simultaneously. what I want is to abstract it. I want to click on an independent key if SHIFT, CTRL, ALT is pressed. I could notice?

  • One option would be to make a kind of dictionary, but it depends on the keyboards, I’m not sure how it works

1 answer

0

Hello!

You can take the keycode from the pressed key and convert to string as follows:

String.fromCharCode(event.keyCode)

To simplify, you could even validate by keycode of the special keys as 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>

Browser other questions tagged javascript javascript-events

You are not signed in. Login or sign up in order to post.