Listening for key combinations in VueJS using a mounted event listener

I am facing an issue with my global key listener - it only catches single key strokes. How can I modify it to capture 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 these events seem to be the solution

The current implementation is not working as expected

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

Answer №1

Check out this solution for detecting if the ctrl key is pressed and another key is also pressed:

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

JSFiddle

If you're looking for a more Vue-friendly approach, consider using vue-global-events. This library allows you to add global key listeners in a Vue style manner, such as @keyup.ctrl.tab="nextTab".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What exactly does "nothing" mean in Node when using async await?

I have a method as shown below: private async sendToAll(clients) { for(const client of clients) { this.send(client, message); await true; // What should I put here to allow the rest of the application to continue executi ...

Switch between various API content upon clicking (JavaScript)

Upon receiving data from an API in JSON format using PHP, I aim to incorporate a filter mechanism for displaying distinct content sourced from the API. For instance, by specifying a filter in my API call, I can retrieve separate datasets such as one with ...

Ensuring that a service is completely initialized before Angular injects it into the system

When Angular starts, my service fetches documents and stores them in a Map<string, Document>. I use the HttpClient to retrieve these documents. Is there a way to postpone the creation of the service until all the documents have been fetched? In ot ...

Establish a universal default component for Vue route configurations

How can I load the component of a specific route in my Vue application within a global component? For example, is there a way to set a global component that will display the components of all routes? I have a Frontend.vue file with <router-view>< ...

What is the best way to insert data from a promise into MongoDB?

While attempting to integrate an array of JSON data from a different server into a MongoDB collection, I encountered the following error message: "Cannot create property '_id' on string". Even though I am passing in an array, it seems to be causi ...

Angular2 Animation for basic hover effect, no need for any state change

Can anyone assist me with ng2 animate? I am looking to create a simple hover effect based on the code snippet below: @Component({ selector: 'category', template : require('./category.component.html'), styleUrls: ['./ca ...

Using Angular 6 to Format Dates

Can anyone provide instructions on how to achieve the following format in Angular? Expected: 20JAN2019 Currently, with the default Angular pipe, I am getting: 20/01/2019 when using {{slotEndDate | date:'dd/MM/yyyy'}} Do I need to write a ...

karma: Error: Unable to access the 'prototype' property of an undefined object

Whenever I attempt to inject my service, the following error occurs: (function () { describe('Test', function () { var $scope, $state, service,ctrl; beforeEach(function() { module('moduleApp'); ...

What is the best way to showcase a specific column from a dataset using Vue.js and axios?

Hey there, I'm still getting the hang of all this and haven't quite mastered the jargon yet. Here's what I need help with: I managed to retrieve data from my SQL database using axios, and when I check in (f12) - network - preview, it shows: ...

The most efficient method for exchanging an array between PHP and Javascript

I have a set of data retrieved from a database stored in an array. The structure of the array is as follows; $rows[0]['id']=1; $rows[0]['title']='Abc'; $rows[0]['time_left']=200; $rows[1]['id']=2; $rows[ ...

retrieving identifiers from a separate table for an array of values

As a newcomer to node and noSQL databases, I am facing challenges in grasping the concept of passing an array of IDs and retrieving the corresponding values from another table. I have 'users' and 'products' tables in my database. The st ...

Creating interactive navigation bar effects with scroll and click functionality using jQuery

Is there a way to make the navigation highlight when a user clicks on it and also scrolls to the corresponding section? Currently, I am facing an issue where only the third navigation event highlights, most likely because when navigating to the fourth or f ...

Is it possible to relocate the file export button to the row of pagination buttons within Datatables implemented with Bootstrap 5?

Utilizing Datatables within a Bootstrap 5 theme has been seamless, with pagination and file export features working effectively. However, the file export button does not align with the theme, prompting me to seek a way to discreetly place it in the same ro ...

Searching for data in Ag grid Vue using a filter

Can someone help me create a search filter in ag grid vue like the one shown in this image? Image link: https://ibb.co/cwVq7DD For documentation, refer to: https://www.ag-grid.com/vue-data-grid/tool-panel-columns/#read-only-functions I attempted to impleme ...

Editing the content of a div in real-time by dynamically updating the innerHTML

Looking for a way to dynamically change the innerHTML of a contentEditable div using pure JavaScript, without relying on the Rangy library. I want the change to occur on keyup without losing cursor position or focus. Here is an example setup: <div id=" ...

Enhancing Vuetify: Incorporating Vuetify styling into v-html

Can the v-html attribute be styled using Vuetify component styling? In the example below, it currently renders the v-table content as plain text: Here is the code (Playground link): <template> <v-app> <v-container> <span v ...

The JSON syntax contains an unexpected token

I am encountering an issue with a JavaScript variable named "text" that contains the following value: text={"text":"@RT #Olle_Carly Nuevas filtraciones del iPhone 6: así sería comparado con el Samsung Galaxy S5 y el iPhone 5S: Des... http://t.co/eRuXLS6 ...

Using for loops in Vue.js to dynamically generate HTML elements

I have a JSON object passed into an EJS template, and I want to achieve the same table structure in VUE.js. However, it seems like v-for in Vue only works with li tags. Is there a way to create a similar loop in VUE that generates HTML elements like show ...

Guide to building a React project with an outdated edition of Create React App

Currently, I'm following an older tutorial to learn React, and as a result, I need to set up a project using Create React App version 1.5.2. I successfully installed <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="204352454 ...

ng-options dependent on the value selected previously

Below is an array that I'm working with. $scope.set = [ {"name":"name1", "value":"value1"} {"name":"name2", "value":"value2"} {"name":"name3", "value":"value3"} ] I want to display options based on previous selections. For example, if I choose name1 ...