web-dev-qa-db-ja.com

javascriptでctrl + zキーの組み合わせをキャプチャする

キャプチャしようとしています ctrl+z このコードとjavascriptのキーの組み合わせ：

<html>
<head>
    <title>Untitled Document</title>
</head>
<body>

    <script type='text/javascript'>
        function KeyPress(e) {
            var evtobj = window.event? event : e


            //test1 if (evtobj.ctrlKey) alert("Ctrl");
            //test2 if (evtobj.keyCode == 122) alert("z");
            //test 1 & 2
            if (evtobj.keyCode == 122 && evtobj.ctrlKey) alert("Ctrl+z");
        }

        document.onkeypress = KeyPress;
    </script>

</body>
</html>

コメント行「test1」を押し続けるとアラートが生成されます ctrl キーを押し、他のキーを押します。

コメント行「test2」を押すとアラートが生成されます z キー。

「test 1＆2」の後の行に従ってそれらをまとめ、押し続けます ctrl キーを押しながら z キーは期待どおりにアラートを生成しません。

コードの何が問題になっていますか？

javascriptcombinationsctrl
65
Paul Johnston
  1. onkeydownではなく、onkeyup（またはonkeypress）を使用します
  2. 122ではなくkeyCode 90を使用します

オンラインデモ： http://jsfiddle.net/29sVC/

明確にするために、キーコードは文字コードと同じではありません。

文字コードはテキスト用です（エンコードによって異なりますが、多くの場合0〜127が残りますASCIIコード）。キーコードはキーボードのキーにマップされます。たとえば、Unicodeで文字0x22909は好意を意味し、実際にこのためのキーを持っているキーボードは（もしあれば）あまりありません。

OSは、ユーザーが設定した入力方法を使用して、キーストロークを文字コードに変換します。結果はkeypressイベントに送信されます。 （一方、キーダウンとキーアップは、テキストを入力するのではなく、ユーザーがボタンを押すことに応答します。）

83
zerkms

Ctrl+t 可能です...キーコードを84のように使用してください

if (evtobj.ctrlKey && evtobj.keyCode == 84) 
 alert("Ctrl+t");
10
chandramouli.jamadagni
$(document).keydown(function(e){
  if( e.which === 89 && e.ctrlKey ){
     alert('control + y'); 
  }
  else if( e.which === 90 && e.ctrlKey ){
     alert('control + z'); 
  }          
});

デモ

7
user3542190

90は Z キーとこれは必要なキャプチャを行います...

_function KeyPress(e){
     // Ensure event is not null
     e = e || window.event;

     if ((e.which == 90 || e.keyCode == 90) && e.ctrlKey) {
         // Ctrl + Z
         // Do Something
     }
}
_

要件に応じて、ifステートメント内にe.preventDefault();を追加して、カスタム機能のみを実行することもできます。

4
JDandChips

この質問に出くわした将来の人々のために、仕事を成し遂げるためのより良い方法があります：

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'z') {
    alert('Undo!');
  }
});

event.keyを使用すると、コードが大幅に簡素化され、ハードコーディングされた定数が削除されます。 IE 9+、こちらのドキュメントをご覧ください： https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

さらに、document.addEventListenerを使用すると、他のリスナーを同じイベントに上書きすることがなくなります。 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener を参照してください

最後に、window.eventを使用する理由はありません。これは積極的に推奨されておらず、脆弱なコードになる可能性があります。 https://developer.mozilla.org/en-US/docs/Web/API/Window/event を参照してください

3
lazd