I am able to detect single key press but when I press 3 keys at a time, It doesn't trigger the event. Below is my code. When I press delete button, It detects but when I hit Ctrl + Alt + O, It doesn't trigger the event.

I am trying to modify the ng-grid cell value and once It's modified I would like to restore the previous value on press of these three keys.

$scope.pressedKey = function (keyObj) {
    if (keyObj.key.toLowerCase() == "delete") {
        console.log("Delete key press  Detected");
    }
    if (keyObj.key.toLowerCase() == "control" && keyObj.key.toLowerCase() == "alt" && keyObj.key.toLowerCase() == "o")
    {
        console.log("Ctrl Alt O key press Detected");
    }
};

$scope.ng_grid_column_defs =
[
    {
        field: "A",
        displayName: "A",
        width: "**"
    },
    {
        field: "B",
        displayName: "B",
        width: "*"
    },
    {
        field: "C",
        displayName: "C",
        width: "***"
    }
];

$scope.my_ng_grid = {
    data: "$scope.data",//this data es from service
    columnDefs: context.ng_grid_column_defs,
    enableColumnResize: true,
    enableCellEdit: true,
    enableCellEditOnFocus: true,
    enableCellSelection: false,
    enableRowSelection: true,
    rowHeight: 20,
    rowTemplate: '<div ng-keydown="pressedKey($event)" tabindex="1" style="height: 100%; width: 100%">' +
                '<div ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
                  '<div ng-cell></div>' +
                '</div>' +
             '</div>',
    beforeSelectionChange: function(rowItem, event){},
    afterSelectionChange: function (rowItem, event){}

};

How can I achieve this?

I am able to detect single key press but when I press 3 keys at a time, It doesn't trigger the event. Below is my code. When I press delete button, It detects but when I hit Ctrl + Alt + O, It doesn't trigger the event.

I am trying to modify the ng-grid cell value and once It's modified I would like to restore the previous value on press of these three keys.

$scope.pressedKey = function (keyObj) {
    if (keyObj.key.toLowerCase() == "delete") {
        console.log("Delete key press  Detected");
    }
    if (keyObj.key.toLowerCase() == "control" && keyObj.key.toLowerCase() == "alt" && keyObj.key.toLowerCase() == "o")
    {
        console.log("Ctrl Alt O key press Detected");
    }
};

$scope.ng_grid_column_defs =
[
    {
        field: "A",
        displayName: "A",
        width: "**"
    },
    {
        field: "B",
        displayName: "B",
        width: "*"
    },
    {
        field: "C",
        displayName: "C",
        width: "***"
    }
];

$scope.my_ng_grid = {
    data: "$scope.data",//this data es from service
    columnDefs: context.ng_grid_column_defs,
    enableColumnResize: true,
    enableCellEdit: true,
    enableCellEditOnFocus: true,
    enableCellSelection: false,
    enableRowSelection: true,
    rowHeight: 20,
    rowTemplate: '<div ng-keydown="pressedKey($event)" tabindex="1" style="height: 100%; width: 100%">' +
                '<div ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
                  '<div ng-cell></div>' +
                '</div>' +
             '</div>',
    beforeSelectionChange: function(rowItem, event){},
    afterSelectionChange: function (rowItem, event){}

};

How can I achieve this?

• javascript
• angularjs
• keyboard-shortcuts
• ng-grid

• If you want to get quick response, worth to post Demo in Plunker/Fiddle/Codepen with your ui-grid table, custom cellTemplate. It will save us a lot of time. Thanks – Maxim Shoustin Commented Nov 9, 2017 at 7:57

3 Answers 3

I absolutely don't know angular, so I won't talk about it, but

if (keyObj.key.toLowerCase() == "control" && 
  keyObj.key.toLowerCase() == "alt" &&
  keyObj.key.toLowerCase() == "o")
{
    console.log("Ctrl Alt O key press Detected");
}

is a dead end.

If keyObj.key is a String, then its toLowerCase() returned value can't be "control" and "alt" and "o" at the same time.

Now, assuming keyObj is a KeyboardEvent, then you should have .altKey and .ctrlKey properties attached to it.

So to detect ctrl + alt + o,

if (keyObj.key.toLowerCase() == "o" &&
  keyObj.altKey &&
  keyObj.ctrlKey)
{
    console.log("Ctrl Alt O key press Detected");
}

There are 3 points:

• You should use 'keydown' or 'keyup' events;
• You should check event.altKey === true && event.ctrlKey === true && event.shiftKey === false to detect if that CTRL and ALT are pressed and SHIFT isn't;
• You should check for event.keyCode === 79 value to detect if key "O" was pressed. It's a number of key on keyboard and won't change if user switch his input language. If you need only Latin variant you still could check event.key === 'o'

document.body.addEventListener('keyup', function(event) {
  if (event.ctrlKey && event.altKey && !event.shiftKey && event.keyCode === 79) {
    console.log('CTRL + ALT + O was pressed');
  }
})

Focus on this snippet and then try to press "CTRL + ALT + O" and any other binations

There is a similar question for detecting key presses that indicates to use keydown instead of pressedKey. The answer by @Martijn Welker seemed to answer the other issue.