event.key ===“Escape”

Question

我有一个javascript window.open弹出窗口，我希望弹出窗口在用户按下ESC键时关闭。我无法弄清楚如何挂钩keydown事件（和什么对象？），以便我可以捕获ESC键。

我正在使用jQuery。

Answer 1

尝试这样的事情：

$(document).keydown(function(e) {
    // ESCAPE key pressed
    if (e.keyCode == 27) {
        window.close();
    }
});

Answer 2

使用JS可以实现而不使用jQuery。

window.onkeydown = function( event ) {
    if ( event.keyCode == 27 ) {
        console.log( 'escape pressed' );
    }
};

Answer 3

请记住，你必须在弹出窗口中使用函数@Gumbo posted ...所以你需要在弹出窗口中包含JQuery并在那里执行函数，而不是打开弹出窗口的窗口。

Answer 4

event.key ===“Escape”

不再有任意数字代码！

document.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; in ES6+
    if (key === "Escape") {
        window.close();
    }
});

Mozilla Docs

Supported Browsers

Answer 5

要同时处理esc和在对话框上输入密钥 window.onkeydown = function（event）{

SecureRandom

Answer 6

您可以使用Jquery轻松实现绑定key events。

您可以在这里使用.keydown()

List of keyboard keys codes

  $(document).keydown(function(e) {        
    if (e.keyCode == 27) {
        window.close();
    }
});

Answer 7

@Gumbo的答案很好但通常你需要解开这个行为所以我建议使用one事件处理程序：

$(document).one('keydown', function(e) {
    // ESCAPE key pressed
    if (e.keyCode == 27) {
        window.close();
    }
});

OR

$(document).on('keydown', function(e) {
    // ESCAPE key pressed
    if (e.keyCode == 27) {
        window.close();
    }
});

并准备好停止行为

$(document).off('keydown');

Answer 8

如果有什么在这里寻找angularjs弹出式解决方案的话，

*这不使用ui-bootstrap依赖项（仅在没有其他方法时才建议使用）

$scope.openModal = function(index){
    $scope.showpopup = true;
    event.stopPropagation();//cool part
};

$scope.closeModal = function(){
    $scope.cc.modal.showpopup = false;
};

window.onclick = function() {
  if ($scope.showpopup) {
      $scope.showpopup = false;
      // You should let angular know about the update that you have made, so that it can refresh the UI
      $scope.$apply();
  }
};

//escape key functionality playing with scope variable
document.onkeydown = function (event) {
  const key = event.key; // const {key} = event; in ES6+
  if (key === "Escape") {
    if ($scope.showpopup) {
        $scope.showpopup = false;
        // You should let angular know about the update that you have made, so that it can refresh the UI
        $scope.$apply();
    }
  }
};

参考文献：以上答案和http://blog.nkn.io/post/hiding-menu-when-clicking-outside---angularjs/

如何在javascript弹出窗口中处理ESC keydown

8 个答案:

event.key ===“Escape”