web-dev-qa-db-ja.com

JavaScriptポップアップウィンドウでESCキーダウンを処理する方法

Javascript window.openポップアップがあり、ユーザーがEscキーを押したときにポップアップが閉じられるようにします。 ESCキーをキャッチできるように、キーダウンイベント（およびどのオブジェクト）をフックするかがわかりません。

JQueryを使用しています。

javascriptjquerypopup
45
Andrew Arnott

次のようなものを試してください：

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

JQueryを使用せずにJSで達成することが可能です。

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

event.key === "エスケープ"

これ以上の任意の番号コードはありません！

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

Mozilla Docs

サポートされているブラウザ

4
Gibolt

ポップアップウィンドウで関数 @ Gumbo posted を使用する必要があることを忘れないでください。したがって、ポップアップにJQueryを含めて、ポップアップを開くウィンドウではなくそこで関数を実行する必要があります。

3
PatrikAkerstrand

@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');
0
Guillaume Bois

Jqueryを使用してbind key events を簡単に実現できます。

ここでは .keydown() を使用できます

キーボードのキーコードのリスト

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

ここで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/

0
narasimharaosp