在AngularJS的ng-grid单元格中检测Ctrl + Alt + O键

时间:2017-10-25 14:45:35

标签: javascript angularjs keyboard-shortcuts ng-grid

我能够检测到单键按下,但是当我一次按下3个键时,它不会触发事件。以下是我的代码。当我按 delete 按钮时,它会检测到但是当我按 Ctrl + Alt + O 时,它不会触发事件。

我正在尝试修改ng-grid单元格值,一旦它被修改,我想在按下这三个键时恢复之前的值。

$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 comes 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){}

};

我怎样才能做到这一点?

3 个答案:

答案 0 :(得分:4)

我绝对不知道角度,所以我不会谈论它,但是

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

是死路一条。

如果keyObj.key是字符串,则其toLowerCase()返回的值不能同时为"control""alt"以及"o"

现在,假设keyObj是一个KeyboardEvent,那么您应该附加.altKey.ctrlKey属性。

所以要检测 ctrl + alt + o

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

答案 1 :(得分:2)

有3点:

  • 你应该使用'keydown'或'keyup'事件;
  • 您应该检查event.altKey === true && event.ctrlKey === true && event.shiftKey === false以检测是否按下了CTRL和ALT而SHIFT不是;
  • 您应该检查event.keyCode === 79值以检测是否按下了键“O”。它是键盘上的一些键,如果用户切换输入语言,则不会改变。如果您只需要拉丁语变体,您仍然可以查看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 combinations

答案 2 :(得分:1)

detecting key presses有类似的问题表明使用keydown而不是pressedKey。 @Martijn Welker的回答似乎回答了另一个问题。