CODEWITHSUNDEEP
javascriptvue.jsvuejs2frontend
UbuntuCore
UbuntuCore

Reputation: 417

VueJS listening to keycombinations via mounted event listener

I have working global key listener, but it manages to catch only single key stroke. How can I catch combinations like ctrl+enter?

mounted() 
{
    window.addEventListener
    (
        "keypress", e => 
        {
          console.log(e.key);
        }
    );
},

Input device events

click, contextmenu, DOMMouseScroll, dblclick, gamepadconnected, gamepaddisconnected, keydown, keypress, keyup, MozGamepadButtonDown, MozGamepadButtonUp, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, mousewheel, MozMousePixelScroll, pointerlockchange, pointerlockerror,wheel

none of those seems to fit it

nor this is not working properly

"keypress", e => 
{
    if (e.ctrlKey)
    {
        console.log(e.key);
    }
}

Upvotes: 0

Views: 146

Answers (1)

Igor
Igor

Reputation: 809

Try this, we're checking ctrl is pressed and the (another) pressed key is not ctrl:

window.addEventListener
    (
        "keydown", e => 
        {
          var evt = window.event ? event : e;
          if (evt.ctrlKey && evt.keyCode !== 17) {
            console.log('Ctrl + ' + e.key);
          }
        }
    );

JSFiddle

You may also be interested in using vue-global-events which allows you to write global key listeners in Vue style (e.g. @keyup.ctrl.tab="nextTab").

Upvotes: 2

Related Questions